[🐛] Error during Microsoft login #8899
Description
Issue
Hi, I have react native android app with firebase, using react-native-firebase. I need to add Microsoft login, but after I try to login, I got following error:
"Unable to process request due to missing initial state. This may happen if browser sessionStorage is inaccessible or accidentally cleared. Some specific scenarios are - 1) Using IDP-Initiated SAML SSO. 2) Using signInWithRedirect in a storage-partitioned browser environment."
I am not sure whether using signWithRedirect in native app is correct. Also I have only web redirectUri to firebase handler defined in Azure app. I tried add android redirectUri, but it had no effect.
Is there any better tutorial how to use Microsoft login+react native app with firebase?
Project Files
Javascript
Click To Expand
package.json:
{
"name": "pns",
"main": "expo-router/entry",
"version": "1.0.0",
"scripts": {
"start": "expo start --dev-client",
"ios": "expo start --dev-client --ios",
"android": "expo start --dev-client --android",
"web": "expo start --web",
"build-web": "expo export -p web",
"lint": "expo lint",
"typecheck": "tsc --project tsconfig.json --noEmit",
"postinstall": "patch-package",
"build-android": "npx eas-cli build --platform android --local --profile production --non-interactive --output=build/build.aab",
"deploy-android": "npx eas-cli submit --platform android --profile preview --non-interactive --path build/build.aab",
"build-android-dev": "npx eas build --platform android --profile development",
"build-ios-dev": "npx eas build --platform ios --profile development"
},
"dependencies": {
"@expo/vector-icons": "^15.0.3",
"@react-native-async-storage/async-storage": "^2.2.0",
"@react-native-firebase/app": "^23.8.6",
"@react-native-firebase/auth": "^23.8.6",
"@react-native-firebase/database": "^23.8.6",
"@react-native-firebase/functions": "^23.8.6",
"@react-native-firebase/messaging": "^23.8.6",
"@react-navigation/native": "^7.1.8",
"date-fns": "^4.1.0",
"expo": "~54.0.25",
"expo-apple-authentication": "~8.0.8",
"expo-auth-session": "~7.0.10",
"expo-build-properties": "~1.0.10",
"expo-camera": "~17.0.10",
"expo-clipboard": "~8.0.8",
"expo-constants": "~18.0.10",
"expo-crypto": "~15.0.8",
"expo-dev-client": "~6.0.19",
"expo-device": "~8.0.10",
"expo-document-picker": "~14.0.8",
"expo-file-system": "~19.0.21",
"expo-font": "~14.0.9",
"expo-haptics": "~15.0.7",
"expo-image": "~3.0.10",
"expo-linear-gradient": "~15.0.8",
"expo-linking": "~8.0.9",
"expo-localization": "~17.0.7",
"expo-location": "~19.0.8",
"expo-router": "~6.0.15",
"expo-splash-screen": "~31.0.11",
"expo-status-bar": "~3.0.8",
"expo-symbols": "~1.0.7",
"expo-system-ui": "~6.0.8",
"expo-task-manager": "~14.0.9",
"expo-web-browser": "~15.0.10",
"geolib": "^3.3.4",
"i18next": "^25.7.1",
"react": "19.1.0",
"react-dom": "19.1.0",
"react-hook-form": "^7.68.0",
"react-i18next": "^16.3.5",
"react-native": "0.81.5",
"react-native-fbsdk-next": "^13.4.1",
"react-native-gesture-handler": "~2.28.0",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-maps": "1.20.1",
"react-native-paper": "^5.14.5",
"react-native-reanimated": "~4.1.1",
"react-native-safe-area-context": "~5.6.0",
"react-native-screens": "~4.16.0",
"react-native-svg": "15.12.1",
"react-native-toast-message": "^2.3.3",
"react-native-web": "~0.21.0",
"react-native-webview": "13.15.0",
"react-native-worklets": "0.5.1"
},
"devDependencies": {
"@stylistic/eslint-plugin": "^5.6.1",
"@types/react": "~19.1.0",
"@typescript-eslint/eslint-plugin": "^8.48.1",
"@typescript-eslint/parser": "^8.48.1",
"eslint": "^9.25.0",
"eslint-config-expo": "~10.0.0",
"eslint-plugin-import": "^2.32.0",
"eslint-plugin-import-newlines": "^1.4.0",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-native": "^5.0.0",
"eslint-plugin-unused-imports": "^4.3.0",
"patch-package": "^8.0.1",
"typescript": "~5.9.2"
},
"private": true
}
SocialLoginSection.tsx :
import React from "react";
import { TouchableOpacity, View } from "react-native";
import * as WebBrowser from "expo-web-browser";
import { OAuthProvider, getAuth, signInWithRedirect } from '@react-native-firebase/auth';
import { showError } from "@/utils/toast";
import { MicrosoftLogo } from "@/assets/images/MicrosoftLogo";
WebBrowser.maybeCompleteAuthSession();
export const SocialLoginSection = () => {
const signInWithMicrosoft = async () => {
try {
const provider = new OAuthProvider('microsoft.com');
provider.addScope('offline_access');
provider.setCustomParameters({
prompt: 'consent',
tenant: 'common',
});
return signInWithRedirect(getAuth(), provider);
} catch (err) {
showError(`Error: ${err}`);
}
};
return (
<View>
<TouchableOpacity onPress={signInWithMicrosoft}>
<MicrosoftLogo />
</TouchableOpacity>
</View>
);
};