React SDK example - nothing in the userInfo but tid and sub

jw 0

I'm sure I'm doing something stupid here but I can't work out what I haven't done.

I am using the changebank React SDK example as my test harness, using the community version of FusionAuth for now, hosted under docker
I've created a new tenant, a new app and then a new user.
I can login using this new user into the app but the userInfo structure has nothing in it other the the use sub and the tid.

Config is below

const config: FusionAuthProviderConfig = {
clientId: "31067471-23fc-4634-afa9-c049ff4f0a86",
redirectUri: "http://localhost:5173",
serverUrl: "http://localhost:9011/",
shouldAutoFetchUserInfo: true,
shouldAutoRefresh: true,
onRedirect: (state?: string) => {
console.log(Redirect happened with state value: ${state}"});
}
};

Example code is:
In main.tsx
const { isLoggedIn, isFetchingUserInfo, userInfo } = useFusionAuth();

In the AccountPage.tsx I have:

    <p>tid {userInfo?.tid}</p>
    <p>sub {userInfo?.sub}</p>
    <p>roles {userInfo?.roles}</p>
    <p>email {userInfo?.email}</p>

The roles and email fields are always null

Any ideas?

mark.robustelli

@jw-0, It sounds like you have an existing version of FusionAuth running. Have you been able to spin up the docker instance that comes with the React Quickstart and compare the applications settings. That might be a good place to start.

Also, in the code for the quickstart I see it provides scopes. You may want to try that as well.

scope: 'openid email profile offline_access'

const config: FusionAuthProviderConfig = {
  clientId: "e9fdb985-9173-4e01-9d73-ac2d60d1dc8e",
  redirectUri: "http://localhost:3000",
  postLogoutRedirectUri: "http://localhost:3000/logged-out",
  serverUrl: "http://localhost:9011",
  shouldAutoFetchUserInfo: true,
  shouldAutoRefresh: true,
  onRedirect: (state?: string) => {
    console.log(`Redirect happened with state value: ${state}`);
  },
  scope: 'openid email profile offline_access'
};

jw 0

Thanks @mark-robustelli - it was just I hadn't included the scopes!

I can see everything I want in the userInfo structure other than the roles.
Is this something I have to do manually? I've looked at the JS SDK code and it seems to be only giving me what comes back in the call to /me

However, they are in the JWT as I'd expect
{
"aud": "3c219e58-ed0e-4b18-ad48-f4f92793ae32",
"exp": 1724955478,
"iat": 1724955418,
"iss": "localhost:9011",
"sub": "75359739-1fb2-4f64-9116-37f67a47a231",
"jti": "6c1935e3-0428-4a09-8651-849e1140fe04",
"authenticationType": "REFRESH_TOKEN",
"roles": [
"admin"
],
"auth_time": 1724954534,
"scope": "offline_access",
"applicationId": "3c219e58-ed0e-4b18-ad48-f4f92793ae32",
"tid": "188a3b31-5d90-bbf8-75dc-94b9e004b1ba",
"sid": "aed93b0a-b993-4fde-98f9-8b274b723dde"
}

mark.robustelli

@jw-0 Looking at the React SDK ReadMe under the Protecting Content section I do see some discussion about Roles.

It says you need to use the RequireAuth component:

import { RequireAuth, useFusionAuth } from '@fusionauth/react-sdk';

Then you can do something like:

const AdminPanel = () => (
  <RequireAuth withRole="admin">
    <button>Delete User</button> // Only displays if user is authenticated and has 'admin' role
  </RequireAuth>
);

Does that help?

jw 0

@mark-robustelli

If I do this:
<RequireAuth withRole="owner">
I am the owner!
</RequireAuth>

I don't see anything displayed on the page even though my login has the owner role.

I've also go the following on the page:

    <p>roles {userInfo?.roles}</p>

And this is always empty.
If I look at the network call to /me in Chrome devtools I see this:

{
"email": "jason@",
"email_verified": true,
"family_name": "Last",
"given_name": "First",
"locale": "af",
"middle_name": "Middle",
"name": "Jason Test customer owner",
"preferred_username": "jason@",
"sub": "26ffd6b7-cbb3-4234-9a16-5ad8b7d6c6bc",
"tid": "03c94007-732e-48f4-88c4-d53e5a777e47",
"zoneinfo": "Africa/Abidjan"
}

Looking at the SDK source the code seems to simply turn this into the JS userInfo object so it looks like the roles will never be set

mark.robustelli

@jw-0 Did you add RequireAuth to the import statement?

jw 0

@mark-robustelli

Yes I did.

import { useFusionAuth, RequireAuth } from "@fusionauth/react-sdk";

growaway10

@jw-0 said in React SDK example - nothing in the userInfo but tid and sub:

I'm sure I'm doing something stupid here but I can't work out what I haven't done.

I am using the changebank React SDK example as my test harness, using the community version of FusionAuth for now, hosted under docker
I've created a new tenant, a new app and then a new user.
I can login using this new user into the app but the userInfo structure has nothing in it other the the use sub and the tid.

Config is below

const config: FusionAuthProviderConfig = {
clientId: "31067471-23fc-4634-afa9-c049ff4f0a86",
redirectUri: "http://localhost:5173 solar smash",
serverUrl: "http://localhost:9011/",
shouldAutoFetchUserInfo: true,
shouldAutoRefresh: true,
onRedirect: (state?: string) => {
console.log(Redirect happened with state value: ${state}"});
}
};

Example code is:
In main.tsx
const { isLoggedIn, isFetchingUserInfo, userInfo } = useFusionAuth();

In the AccountPage.tsx I have:
 tid {userInfo?.tid}
 sub {userInfo?.sub}
 roles {userInfo?.roles}
 email {userInfo?.email}
The roles and email fields are always null

Any ideas?

It seems like your FusionAuth configuration might be missing the correct user claims scope, which is why only sub and tid are populated in userInfo.

Here are a few steps to check:

Scopes: Ensure your FusionAuth application has the correct scopes assigned (like email and roles). In FusionAuth, go to Applications > [Your App] > OAuth and add scopes like email and roles.

Claims Mapping: Confirm that the user’s email and roles are set to be included in the userInfo claims. Go to Tenants > [Your Tenant] > JWT and ensure those fields are mapped to the JWT.

User’s Roles: Ensure the user has roles assigned in Users > [Your User] > Registrations and check that the roles are linked to the application.

After updating these settings, try logging in again to see if the userInfo structure includes email and roles.

charlotteharrison0913

After logging in, inspect the JWT token returned by FusionAuth. You can decode it using a tool like jwt.io to see what claims are included. This can help you understand what data is being returned. Review the implementation of the ChangeBank React SDK example to ensure that it correctly handles the userInfo endpoint. There may be specific configurations or calls that need to be made to retrieve additional user data https://fusionauth.io/community/forum/topic/2754 slope run

charlotteharrison0913

@jw-0 said in React SDK example - nothing in the userInfo but tid and sub:

I'm sure I'm doing something stupid here but I can't work out what I haven't done.

I am using the changebank React SDK example as my test harness, using the community version of FusionAuth for now, hosted under docker
I've created a new tenant, a new app and then a new user.
I can login using this new user into the app but the userInfo structure has nothing in it other the the use sub and the tid.

Config is below

const config: FusionAuthProviderConfig = {
clientId: "31067471-23fc-4634-afa9-c049ff4f0a86",
redirectUri: "http://localhost:5173", slope run

serverUrl: "http://localhost:9011/",
shouldAutoFetchUserInfo: true,
shouldAutoRefresh: true,
onRedirect: (state?: string) => {
console.log(Redirect happened with state value: ${state}"});
}
};

Example code is:
In main.tsx
const { isLoggedIn, isFetchingUserInfo, userInfo } = useFusionAuth();

In the AccountPage.tsx I have:
 tid {userInfo?.tid}
 sub {userInfo?.sub}
 roles {userInfo?.roles}
 email {userInfo?.email}
The roles and email fields are always null

Any ideas?

In FusionAuth, ensure that the user claims are set up correctly. Go to the tenant settings and check the "User Claims" section to confirm that the necessary claims (like email, name, etc.) are included. Make sure that your application is requesting the correct scopes during the authentication process. Common scopes include openid, profile, and email. Verify that these scopes are included in your authentication request. Review the ChangeBank React SDK example to ensure it correctly handles the userInfo endpoint. There may be specific configurations or API calls that need to be made to retrieve additional user data.