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";