Share via

How to use azure for react native authentication

Aruna kumar 0 Reputation points
2024-01-25T08:11:35.7866667+00:00

i am developing a react native expo app, i have implemented the authentication using firebase but now i want to switch to azure, i am a complete beginner as far as concerned with azure. i have searched a lot for tutorials regarding the ssame and i couldnt find one. please help. thanks in advance

Microsoft Entra
0 comments

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Azar 22,355 Reputation points MVP
    2024-01-25T08:34:25.7033333+00:00

    Hey Aruna kumar

    Lemme give you a short overview on this, firstly you need an azure Active Directory AD for handling user authentication.

    • Go to the Azure Portal.
    • Go to Azure Active Directory > App registrations.
    • Click on "New registration" and fill in the necessary details.
    • Note down the Application (client) ID and Directory (tenant) ID.

    So the AD is taken care of, now the next part is configuring auth in AD

    In the Azure AD App Registration, go to the "Authentication" tab.

    Add a Redirect URI for your app, typically in the format https://yourappname.expo.dev.

    And now set up your React Native Expo App, Install the necessary packages. For Azure AD, you can use the react-native-app-auth library.

    npm install react-native-app-auth

    Now Initialize the library with your Azure AD configuration in your React Native app.

    import { authorize } from 'react-native-app-auth';  const config = {   issuer: 'https://login.microsoftonline.com/{your-tenant-id}',   clientId: '{your-client-id}',   redirectUrl: 'https://yourappname.expo.dev',   scopes: ['openid', 'profile', 'email'],   serviceConfiguration: {     authorizationEndpoint: 'https://login.microsoftonline.com/{your-tenant-id}/oauth2/v2.0/authorize',     tokenEndpoint: 'https://login.microsoftonline.com/{your-tenant-id}/oauth2/v2.0/token',   }, };  async function signIn() {   try {     const result = await authorize(config);     console.log('Authorization Result:', result);   } catch (error) {     console.error('Authorization Error:', error);   } }

    Use the signIn function to trigger the Azure AD authentication flow.

    javascriptCopy code
<Button title="Sign In" onPress={signIn} />

    If this helps kindly accept the answer thanks much.

  2. Alfredo Revilla - Upwork Top Talent | IAM SWE SWA 27,436 Reputation points
    2024-01-31T05:56:20.8133333+00:00

    Hello @Aruna kumar, in addition to @Azar excellent answer, I suggest you to take a look to the Microsoft Graph sample React Native app. It will show you how to authenticate to Entra ID and also how to get authorized and use the Microsoft Graph JavaScript SDK to access data in Office 365 from React Native.

    Regarding the AADSTS50020 error, it seems that is being thrown due to loging-in with a personal account that its not a guest or member of the target/resource tenant. For how scenarios and solutions take a look at Error AADSTS50020 - User account from identity provider does not exist in tenant.

    Let us know if you need additional assistance. If the answer was helpful, please accept it and rate it so that others facing a similar issue can easily find a solution.

    0 comments