How to Authenticate in Azure and GraphQL using Expo AuthSession
If you are here then my assumption is that you have also reviewed Expo’s documentation on how to Authenticate a user in Azure Active Directory with AuthSession and come to the conclusion… “What the heck am I looking at? And where do I even start?”
Luckily for you, I have already painstakingly completed this task and I want to show you how you can do it too instead of installing someone’s soon-to-be unsupported component.
Prerequisites
- You have created a managed expo app. If you haven’t, you can follow the instructions here https://docs.expo.dev/get-started/create-a-new-app/
- An Azure account that can sign into Azure Portal
- You have a basic understanding of the Expo framework
Create an App in Azure Portal
Head over to https://portal.azure.com/ and sign in with your account. Once you have done so search for “App Registration” in the search bar and create a “New Registration”.
From there you will fill in the form that will identify your App. It should look something like this.
Preferably you would choose the name that matches your App. For supported account types I stuck with the default. You can find a better explanation of Active Directory here https://docs.microsoft.com/en-us/azure/active-directory/fundamentals/active-directory-whatis.
The redirect URI is the important part. Developing locally, your redirect URI would be the metro URI generated by expo.
In production, you will use the schema that is outlined in App.json but append “://[path]” at the end. It is not enough to put the schema we also need to identify a path in App Registration which the Web Browser should redirect back. Since we are not handling the path, we can ignore it for now.
Let code!
Once you have done that we can begin coding! In the components folder of your Expo app, create a new component called OfficeSignIn and implement the basic example from Expo.
Here is Expo’s example
Here is what we have after some adjustments and filling in the same info.
You can find your tenet ID and client ID from App Registration on Azure Portal.
To provide an explanation of what we did. When the component mounts we request Expo to fetch a discovery document to authenticate with our provider. In our case it is Microsoft.
Passing in the options we need to the AuthSession.AuthRequest constructor we will initialize the session we need to begin an AuthSession. We save this variable in the state with the key, authRequest.
When the user clicks on the button, we call promptAsync() which creates a promise that triggers a WebBrowser to appear where we will continue to fill in our credentials. Once we have completed that, the redirect URI we supplied in the options parameter of the AuthSession.AuthRequest object we instantiated will be used to redirect back to the app. The promise is complete and we will save what is returned to the state with the key, authorizeResult.
Using useEffect we can detect changes in state, since we stored what is returned from the last promise in the state we can parse through the results.
Ideally, the response type is ‘success’. Once you have arrived here we are authenticated but to complete the rest of this “How-to” we need to further authorize GraphQL to pull relevant data that was outlined in the scope.
Our next step is to exchange the authorizeResult code in exchange for an access token that can be used to make a further request to GraphQL.
Given that the GraphQL endpoint we want to use is “https://graph.microsoft.com/oidc/userinfo”, we will exchange the code received from authorizeResults for an access token using the function AuthSession.exchangeCodeAsync()
What your second useEffect should look like
Once you have received the data from GraphQL you can do what you need with that information. You could send it as navigation parameters to another screen or register the user on your backend with an API request.
Full Example:
Happy Coding!
