[🐛] Error during Microsoft login

[zbynekjadrnicek]

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>
  );
};

[MichaelVerdon]

Hi there, signWithRedirect is web exclusive functionality I believe. If you want to implement microsoft login to your application, look into using signInWithCredential.

[github-actions]

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.