Sign In with Microsoft not working

[BB-BenBridges]

Hi there,

I have followed the instructions at https://rnfirebase.io/auth/social-auth#microsoft to setup Microsoft login, but when I click the login button, the screen flashes like a new window opens but then reverts back to my app. Screen recording and code below. The only thing I get in the logs is my "Signing in with Microsoft..." console.log()

I have Microsoft setup as an auth provider in my FireBase project. Redirect URL is also setup in my Microsoft app registration. SHA-1 fingerprint fingerprint is also set in the firebase console.

• Expo v52.0.25
• @react-native-firebase/app v21.10.1
• @react-native-firebase/auth v21.10.1

Screen.Recording.2025-02-18.at.15.58.47.mov

import { Image, StyleSheet, Button } from "react-native";
import { HelloWave } from "@/components/HelloWave";
import ParallaxScrollView from "@/components/ParallaxScrollView";
import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import { useEffect, useState } from "react";

import auth from "@react-native-firebase/auth";

const onMicrosoftButtonPress = async () => {
  console.log("Signing in with Microsoft...");
  // Generate the provider object
  const provider = new auth.OAuthProvider("microsoft.com");

  // Optionally add scopes
  provider.addScope("offline_access");
  // Optionally add custom parameters
  provider.setCustomParameters({
    prompt: "consent",
    // Optional "tenant" parameter for optional use of Azure AD tenant.
    // e.g., specific ID - 9aaa9999-9999-999a-a9aa-9999aa9aa99a or domain - example.com
    // defaults to "common" for tenant-independent tokens.
    tenant: "12345678-xxxx-yyyy-zzzz-123456789011",
  });

  // Sign-in the user with the provider
  return auth().signInWithPopup(provider);
};

export default function HomeScreen() {
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState();

  // Handle user state changes
  function onAuthStateChanged(user) {
    console.log("Auth state changed...");
    console.log(user);
    setUser(user);
    if (initializing) setInitializing(false);
  }

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);

  if (initializing) return null;

  return (
    <ParallaxScrollView
      headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
      headerImage={
        <Image
          source={require("@/assets/images/partial-react-logo.png")}
          style={styles.reactLogo}
        />
      }
    >
      <ThemedView style={styles.titleContainer}>
        <ThemedText type="title">Welcome!</ThemedText>
        <HelloWave />
      </ThemedView>

      {!user && (
        <Button
          title="Microsoft Sign-In"
          onPress={() =>
            onMicrosoftButtonPress().then(() =>
              console.log("Signed in with Microsoft!")
            )
          }
        />
      )}
      {user && <ThemedText type="title">Hello {user.email}</ThemedText>}
    </ParallaxScrollView>
  );
}

const styles = StyleSheet.create({
  titleContainer: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  reactLogo: {
    height: 178,
    width: 290,
    bottom: 0,
    left: 0,
    position: "absolute",
  },
});