using react-native-app-auth in react native app and login using MS API for login creates a token in browser

Question

I'm using react-native-app-auth package to do my sign in process with MS Graph API. The problem that I face here is,

When we do the login using,

import { authorize } from 'react-native-app-auth';

const config = {
  issuer: '<YOUR_ISSUER_URL>',
  clientId: '<YOUR_CLIENT_ID>',
  redirectUrl: '<YOUR_REDIRECT_URL>',
  scopes: ['<YOUR_SCOPES_ARRAY>'],
};

const result = await authorize(config);

And this opens the MS Authentication page in an in-app browser(from the react native app) and there it asks for username/password and does the authorization and returns back to the app(react native) with the access token.

Problem: When I open the safari browser and open office.com or outlook.com and click on sign in it automatically takes to the home page without asking for credentials.

But we don't want this to happen. Any idea to prevent or sort this out?

Thanks in advance.

Regards, RJ

vicky kumar · Accepted Answer · 2022-07-07 11:29:50Z

0

You can try using Oauth authentication to login for react native app , sample code , if you want to know more , please check - https://github.com/microsoftgraph/msgraph-training-react-native

import AsyncStorage from '@react-native-async-storage/async-storage';
import {authorize, refresh, AuthConfiguration} from 'react-native-app-auth';
import moment from 'moment';

import {AuthConfig} from './AuthConfig';

const config: AuthConfiguration = {
  clientId: AuthConfig.appId,
  redirectUrl: 'graph-tutorial://react-native-auth/',
  scopes: AuthConfig.appScopes,
  additionalParameters: {prompt: 'select_account'},
  serviceConfiguration: {
    authorizationEndpoint:
      'https://login.microsoftonline.com/common/oauth2/v2.0/authorize',
    tokenEndpoint: 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
  },
};

edited Jul 7, 2022 at 11:29

answered Jun 17, 2022 at 5:15

vicky kumar

7465 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Raja Over a year ago

Thanks for the response. But it would be great if we can suggest some for react-native.

vicky kumar Over a year ago

Apologize for that i given react code , add code for react native please check my updated ans above. Hope this will help , thanks .

Raja Over a year ago

Thanks for the response. But this code helps to select account during login in app, but the actual issue that i mention here is, Once I do the login in the app and close the app. Open the device default browser(safari or chrome) and hit office.com, it directly opens the home page and not asking for login.

vicky kumar Over a year ago

As you can see the authorizationEndpoint in my above code , when you add that in your code , it will redirect you the the login page , once you login you will get the token , which will add in tokenEndpoint , could you please try above code once , hope that will work. Thanks

Raja Over a year ago

I would like to give a more elaborate description of the issue. The config that you have given is the one that I'm using as well. But the issue that I face is once the login is done using the react-native app. I open the normal browser and hit office.com it automatically redirects me to the home page without asking for credentials in the browser which is what my issue is.

|

Raja · Accepted Answer · 2022-09-12 19:48:43Z

0

After a struggle was able to understand that, as per the latest updates on security SSO is made mandatory where if we use the default browser or system browser it will store the cookies and make our login when we open the browser it automatically does the login.

answered Sep 12, 2022 at 19:48

Raja

972 silver badges11 bronze badges

1 Comment

Karan Gehlod Oct 26 at 14:58

SO does it mean that we need to use logout endpoint instead of using incognito browser tab?

Collectives™ on Stack Overflow

using react-native-app-auth in react native app and login using MS API for login creates a token in browser

2 Answers 2

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related