search

dorinclisu / fastapi-auth0

FastAPI authentication and authorization using auth0.com
MIT License
230 stars 37 forks source link

Obtaining the token thru front end thru SDK #5

Closed aliakhtar closed 3 years ago

aliakhtar commented 3 years ago

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?

aliakhtar commented 3 years ago

nvm, i wasn't passing in audiences correctly :)

stephensilber commented 3 years ago

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?

aliakhtar commented 3 years ago

@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..

stephensilber commented 3 years ago

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=' on my front end. After that, I received a regular token from Auth0 vs. an opaque token.

dorinclisu commented 3 years ago

@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.

stephensilber commented 3 years ago

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

dorinclisu commented 3 years ago

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.