auth example with azure ad

Please provide the following:

  1. SDK Version: latest
  2. Platforms(Android/iOS/web/all):
    Android and iOS

i have built a small app which works but it has no authentication on it yet. its getting data from an api which is also open. I am planning to make the api secure with aad authentication. i want users of my app also to get the token from same aad tenant and then only be able to call the api.

are there any examples i can follow along? or do i just go with authsession and try to figure it out.

Manish

Hi

This might be what you’re looking for:
https://docs.expo.io/guides/authentication/#azure

See also the rest of that page.

thanks. apologies if its a super basic question but i gave it a quick shot and added a Button in my app and on click i added the code like this:
const LoginControl = (props) =>{

const hangleClick = () =>{

// Endpoint

const discovery = AuthSession.useAutoDiscovery(‘https://login.microsoftonline.com//v2.0’);

// Request

const [request, response, promptAsync] = useAuthRequest(

{

  

  clientId: 'cc37ec09-e815-4673-8d77-a48388b708a6',

  scopes: ['openid', 'profile', 'email', 'offline_access'],

  // For usage in managed apps using the proxy

  redirectUri: makeRedirectUri({

    // For usage in bare and standalone

    native: 'myawesomeapp://auth',

  }),

},

discovery

);

};

return(

);

}

on click press, i get the error below:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
    See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

error :slight_smile:Module.useAutoDiscovery
C:/Users/manish/source/src/AuthRequestHooks.ts:13
10 | *
11 | * @param issuerOrDiscovery
12 | */

13 | export function useAutoDiscovery(issuerOrDiscovery: IssuerOrDiscovery): DiscoveryDocument | null {
14 | const [discovery, setDiscovery] = useState<DiscoveryDocument | null>(null);
15 |
16 | useEffect(() => {

Here’s an example using Dropbox authentication. Does it help?

i will look into it but after fiddling around a little i am able to make it work for azure ad, except it is not getting the access token. the url only has the code so response.params.access_token returns nothing. although in scope, i do have apis that i want to call. i think some small tweak is needed to make it work now so i can get the access token also. i tried adding the token url in discovery manually also instead of using autodiscover but that did not help.

so i think i found the issue with azure ad auth. the redirect url generated by expo is something like this:https://auth.expo.io/@manishshukla/ and i cant really add that as a reply URL when registering for app in aad as it has “@”. i get this error saying reply url is not party of replyurls.
Message: AADSTS50011: The reply URL specified in the request does not match the reply URLs configured for the application: ‘5dd3ba80-6ae2-4625-9f4f-6b77b5c6d751’.

@wodin i believe i am having issues with redirecturls. if i hardcode the redirect url to something then aad passes it and the response goes somewhere which is not the app. if i dont override the redirecturl, then not sure what all i need to add in aad while registering the app. i have tried using expo-app-auth but with no success. btw, i am able to authenticate using google from within expo.

We ran into the same issue using Azure AD. What we did was use the Linking library and have it generate a redirect url:

const baseRedirectUrl = Linking.makeUrl('/')

For local testing it would then be exp://127.0.0.1/--/auth and for builds it would be
com.buildidentifier.whatever:///auth.

Then it worked for us perfectly!

Note Make sure that your metro bundler is set to local and not lan.

it works in development environment but then it does not work within metro if i want to just have someone try within metro without doing a build and publishing to app store. the makeredirect url still puts @username in the redirect uri which is root cause of the issue. btw, i was able to make it work with metro builder set to lan also. let me know if this is not true. i was hoping to make it work without publishing to play store but looks like it is not possible.

I never share my Expo client URL to let someone test. (since in my experience a straight up build has a better user experience)
What we have is separate release channels in place and then we share those packages. We use Tryoutapps to share internal builds or builds that aren’t ready for release to the stores.

You could also just build your app with a release channel and then share the build download on your Expo builds dashboard, would that work?

the makeredirect url still puts @username in the redirect uri which is root cause of the issue.

You can’t use makeredirecturl with Azure AD like i said, Linking should work, aslong as you are working on local. Anything else I would suggest making separate release channels and share those builds.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.