Obtaining the token thru front end thru SDK
aliakhtar opened this issue · comments
Hey, great package. I followed your video guide. If I obtain a token for a user using the authorize button in docs, that works fine. But, if I obtain a token on the front end using the Auth0, that token ends up being malformed even when I provide the audience.
Do you know how the correct token can be obtained thru the javascript SDK?
nvm, i wasn't passing in audiences correctly :)
Hi @aliakhtar, I think I'm running into the same issue you were. Can you elaborate on where you were not properly passing in audiences?
@stephensilber I wasn't passing in audience to the auth0 client. The value has to match what you have in your auth0 api application plus backend and frontend need to have the same value for it. Hope that helps..
I was just about to respond saying I figured it out. I think I had a separate issue, but I ended up fixing it by enabling the Application in the API's "Machine to Machine Applications" tab and adding 'AUTH0_AUDIENCE=<api_audience>' on my front end. After that, I received a regular token from Auth0 vs. an opaque token.
@stephensilber Glad you solved it, but may I ask what is a "Machine to Machine Application" doing in this context? Typically, you would use M2M for servers / CLI's, not for frontend which typically uses the SPA application type. The main difference is that SPA has client_credentials disabled (oauth2 grant types), because you would not want to pass client secret on the frontend as that would make it publicly accessible to anyone inspecting the js bundle.
I am using a serverless function to proxy the request (Next.js API routes) which receive the client's cookies and then fetches the access token in the serverless function.
Here's an example:
https://github.com/auth0/nextjs-auth0/blob/main/examples/kitchen-sink-example/pages/api/shows.ts#L5
Perhaps that step isn't necessary, but without it I could not generate a token using my application's client id in the API's 'Test' tab (for testing) which made me think it was necessary
Hmm ok, serverless is a valid case for M2M. Though it's definitely unnecessary if all you want is a simple access token. Also be aware than on the free plan you have a monthly limit of 1000 m2m requests, which you will consume rather quickly with a couple of users. SPA apps have no such limits.
Anyway, the Test tab on the API is a bit misleading, and it automatically creates a m2m app, which of course is not suitable for frontend. The auth0 dashboard offers no interactive way to test SPA apps, but you can use Swagger UI as described in the docs of fastapi-auth0.