I am using react-native-app-auth and so far am able to get back the tokens such as the access_token and profile_info token, but what am I supposed to do with these?

Is the access token for accessing our backend api's? In other words we need to send this access token from the front end whenever a request is made?

I also don't know what to do with the profile_info token. I have decoded it use a decoder, but it just shows a bunch of useless data like the following:

{
    "idp": null,
    "name": null,
    "preferred_username": null,
    "sub": null,
    "tid": "c8745-dgjjh-dg534lsdj...",
    "ver": "1.0"
}

export const authConfig = {
  issuer: 'https://...',
  clientId: 'some-id',
  redirectUrl: 'myRedirectURI',
  scopes: ['email', 'openid', 'offline_access', 'profile'],
}
const handleLogin = () => {
    try {
      const authState = await authorize(authConfig);

      console.log('AUTH STATE', authState)

      const refreshedState = await refresh(authConfig, {
        refreshToken: authState.refreshToken,
      })
 
      const userToken = refreshedState?.additionalParameters?.profile_info 
        ? refreshedState?.additionalParameters?.profile_info 
        : ''
      const profile = jwtDecode(userToken, { header: true })

      console.log('profile', profile)
    } catch (error) {
      console.error('Error B2C Login: ', error)
    }
}

UPDATE

After decoding the ID Token JWT, it shows an object like the following.

{"aud": "sssxxxxc-0000-0000-0000-xxxx0000xx000x000", "auth_time": xxxxx, "exp": xxxxx, "iat": xxxx, "iss": ".0/", "nbf": 000000, "nonce": "0xxxx4xxxx5r32xxx", "sub": "000cc000c0-00f00-0000-000s-000asd00sfs0", "tfp": "some_string", "ver": "1.0"}

What am I supposed to do with this data, I read up on some of these properties and they seem to be for mostly validating the tokens. For example ISS and AUD, but after looking at docs, it doesn't even tell me how to properly use these to authenticate the user is valid.

Further, I still dont understand how to view the logged in users data such as the name.

I even tried decoding the user_profile token, but that returns a bunch of null values

{"idp": null, "name": null, "preferred_username": null, "sub": null, "tid": "00dsafg0s-0000-000a-000a-00asf0as0s", "ver": "1.0"}

But at least this has some useful properties such as name and preferred_username, but they are null for some reason. The user_profile token is inside the refreshedState tokens

I am using react-native-app-auth and so far am able to get back the tokens such as the access_token and profile_info token, but what am I supposed to do with these?

Is the access token for accessing our backend api's? In other words we need to send this access token from the front end whenever a request is made?

I also don't know what to do with the profile_info token. I have decoded it use a decoder, but it just shows a bunch of useless data like the following:

{
    "idp": null,
    "name": null,
    "preferred_username": null,
    "sub": null,
    "tid": "c8745-dgjjh-dg534lsdj...",
    "ver": "1.0"
}

export const authConfig = {
  issuer: 'https://...',
  clientId: 'some-id',
  redirectUrl: 'myRedirectURI',
  scopes: ['email', 'openid', 'offline_access', 'profile'],
}
const handleLogin = () => {
    try {
      const authState = await authorize(authConfig);

      console.log('AUTH STATE', authState)

      const refreshedState = await refresh(authConfig, {
        refreshToken: authState.refreshToken,
      })
 
      const userToken = refreshedState?.additionalParameters?.profile_info 
        ? refreshedState?.additionalParameters?.profile_info 
        : ''
      const profile = jwtDecode(userToken, { header: true })

      console.log('profile', profile)
    } catch (error) {
      console.error('Error B2C Login: ', error)
    }
}

UPDATE

After decoding the ID Token JWT, it shows an object like the following.

{"aud": "sssxxxxc-0000-0000-0000-xxxx0000xx000x000", "auth_time": xxxxx, "exp": xxxxx, "iat": xxxx, "iss": "https://somedomain.login.com/xxxx000xx00x00x-0000-000a-000a-a00000a00e0d0/v9.0/", "nbf": 000000, "nonce": "0xxxx4xxxx5r32xxx", "sub": "000cc000c0-00f00-0000-000s-000asd00sfs0", "tfp": "some_string", "ver": "1.0"}

What am I supposed to do with this data, I read up on some of these properties and they seem to be for mostly validating the tokens. For example ISS and AUD, but after looking at docs, it doesn't even tell me how to properly use these to authenticate the user is valid.

Further, I still dont understand how to view the logged in users data such as the name.

I even tried decoding the user_profile token, but that returns a bunch of null values

{"idp": null, "name": null, "preferred_username": null, "sub": null, "tid": "00dsafg0s-0000-000a-000a-00asf0as0s", "ver": "1.0"}

But at least this has some useful properties such as name and preferred_username, but they are null for some reason. The user_profile token is inside the refreshedState tokens

• reactjs
• react-native
• azure-ad-b2c
• msal-react

1 Answer 1

Refer to this.

• ID token - A JWT that contains claims that you can use to identify users in your application
• Access token - A JWT that contains claims that you can use to identify the granted permissions to your APIs. And, yes, you use it to authenticate to your API.
• Refresh token - Refresh tokens are used to acquire new ID tokens and access tokens in an OAuth 2.0 flow

"Profile" simply augments the data in the id_token (which is fixed) with "extra" data about the user.