How can I enable users to change their email address from React USING A BACKEND API?

Hey everyone! I have spent a total of 10 hours trying to figure this out, so I would appreciate any help!

I’ve gone through multiple tutorials, documents, this forum, etc.

I am creating a React App that uses Auth0. I want users to be able to change their information (name, email, photo, etc). I ended up at How can I enable users to change their email address from a SPA or native app? where it says “Because of these limitations, email change requests from public clients must flow through a backend or proxy API”.

I used The Complete Guide to React User Authentication with Auth0 to create an API, which works (I can successfully call the protected-message using an access_token from React). But when I try to get a management token FROM THE API (not React), it says ‘Unauthorized’. (I copied the Node.js code from Get Management API Access Tokens for Production)

From 401 Unauthorized, it was suggested to change application/x-www-form-urlencoded to application/json. When I do that, I get “Grant type ‘client_credentials’ not allowed for the client.” Looking into that at Application Grant Types, I see " To use this grant type, you must indicate that the application is confidential rather than public. Use the Management API to set the token_endpoint_auth_method to client_secret_post or client_secret_basic ."

I cannot for the life of me figure out how to use the Management API to change it. But going back to How can I enable users to change their email address from a SPA or native app?, it says that all you have to do is use a back-end API (instructions don’t say anything about switching grant types). So does that mean I’ve just been going down a huge rabbit hole and it’s not needed?

I am creating this application so I can get more experience with React, etc, and put it in my portfolio. So it’s not something that is urgent, but I’ll go crazy until I get this figured out. Thank you in advance for the help!

Hey there!

We don’t have specific guidance for react regarding that but our users already asked similar questions that can guide you:

Those just describe how to change user information, just like the links I posted. There’s nothing in there about how to fix the errors when trying to actually do it.

Hello @Cutecat42,

I think “back end API” may be misleading … you just need a confidential client, which means not a single page app. I might be splitting hairs but it doesn’t need to be an API per-se. Just a back-end / server-side component like a node.js app.

In the auth0 management console, if you create the client (“application”) for the back-end as a “regular web app” it will be configured as a confidential client and should have the client creds grant enabled by default.

1 Like

So using this second app, I can have users change their info on the first app?

More or less, yes. The backend is responsible for handling privileged operations that cannot be trusted to a public client like an SPA. The backend is a confidential client and can have full access to the management API.

I’m not sure about this, but maybe it is possible to do this all on the front-end as long as you are using the Authz Code grant flow with PKCE. I seem to recall I had a co-op student working for me recently who did exactly this. I’ll see if I can dig that work up.

I am trying to set it up with the PKCE and it’s not working. When I try to set up createAuth0Client, I can see the functions in the prototype, but when I try to call them (for example, auth0.logout()), it says it’s not a function.

If I skip that, and just do Auth0Client (which it says you can do), I can successfully login and logout, and manually get a token silently, but nothing I do gets me auth0.getUser(). It always ends up undefined. After Googling, the only thing that pops up is about Safari, but I’m on Chrome, so…yea.

Hi @Cutecat42. Unfortunately I am not a developer (well, not a real developer, just a scrub python scripter) so I can’t comment on the details of implementing this with react. Where I work we have been using the backend-for-frontend model and using the server-side component to handle the privileged operations. Other than the co-op student project I mentioned (I’ll see if I can dig that up next week when I am back to work) I don’t think we are currently doing and pure SPAs + PKCE.