Expo AuthSession w/ Azure not returning to app

Question

I have copy the same structe as the documentation said's and after opening the microsoft login page, and press continue, nothing happens.

I Think the problem could be with the scheme or filter intent, but i don't know.

My scheme is configured as com.garaje.OsExp, also configure linking in the navigator container

  const discovery = useAutoDiscovery(
    "https://login.microsoftonline.com/<TenantID>/v2.0"
  );

  const redirectUri = makeRedirectUri({});
  const clientId = "+++++++++++++++++++++++++";

  // We store the JWT in here
  const [token, setToken] = React.useState<string | null>(null);

  // Request
  const [request, , promptAsync] = useAuthRequest(
    {
      clientId,
      scopes: ["openid", "profile", "email", "offline_access"],
      redirectUri,
    },
    discovery
  );

Answer 1

Here I created React Native Expo application with Azure AD authentication.

CMD: expo init MyAzureAuthApp

• Then I configured Azure AD with my requirement and app registration, below is my application code.

App.js

import React, { useEffect } from 'react';
import { Linking, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AuthScreen from './AuthScreen';
import * as AuthSession from 'expo-auth-session';

const Stack = createStackNavigator();

export default function App() {
  useEffect(() => {
    const handleRedirect = async (event) => {
      if (AuthSession.isRedirectFromAuthSession(event.url)) {
        await AuthSession.handleRedirectAsync(event.url);
      }
    };

    Linking.addEventListener('url', handleRedirect);

    return () => Linking.removeEventListener('url', handleRedirect);
  }, []);

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Auth">
        <Stack.Screen name="Auth" component={AuthScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

AuthScreen.js:

import React, { useEffect } from 'react';
import { View, Text, Button, Linking } from 'react-native';
import * as AuthSession from 'expo-auth-session';

const AuthScreen = () => {
  const discovery = AuthSession.useAutoDiscovery(
    'https://login.microsoftonline.com/<TenantID>/v2.0'
  );

  const redirectUri = AuthSession.makeRedirectUri({});
  const clientId = 'YOUR_CLIENT_ID';

  const [token, setToken] = React.useState<string | null>(null);

  const [request, response, promptAsync] = AuthSession.useAuthRequest(
    {
      clientId,
      scopes: ['openid', 'profile', 'email', 'offline_access'],
      redirectUri,
    },
    discovery
  );

  useEffect(() => {
    if (response) {
      if (response.type === 'success') {
        setToken(response.params.access_token);
      } else if (response.type === 'error') {
        console.error('Authentication error:', response.error);
      }
    }
  }, [response]);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>{token ? `Token: ${token}` : 'App'}</Text>
      {token ? null : <Button title="Login" onPress={() => promptAsync()} />}
    </View>
  );
};

export default AuthScreen;

Azure AD:

Run CMD: npx expo start

Result: