Access Token on Local Host

twilly86 commented 4 years ago

I am trying to use this library to get an access token for a web api.

I can login, but when I try to get the access token, I get the error..

error: "consent_required", error_description: "Consent required"

It looks like when running off localhost, we need to pop up a consent screen for the user to validate, but when running off public url, this can be bypassed.

Could this library detect when running off localhost and pop up the consent screen instead of failing silently?

Error..

error: "consent_required", error_description: "Consent required"

I think the workaround is to run off a custom domain instead of localhost while debugging, but it'd simply setup if we could run off localhost.

twilly86 commented 4 years ago

Possibly calling getTokenWithPopup, instead of getTokenSilently if we are running off localhost might help? It looks like this only needs to be called once, and then subsequent calls can use getTokenSilently without error, event after logout/login.

juhaelee commented 4 years ago

There's a problem with running off a custom domain as well. If you run off a custom domain you'll get the following error:

Error: 
      auth0-spa-js must run on a secure origin.
      See https://github.com/auth0/auth0-spa-js/blob/master/FAQ.md#why-do-i-get-auth0-spa-js-must-run-on-a-secure-origin 
      for more information.

So you'll have to create some proxy to serve your localhost server using https. I think calling getTokenWithPopup if running on localhost might be the way to go here. Or at least calling that when in development?

brunoreis commented 4 years ago

Not sure if this is exactly what you want, but you can test this code on localhost by acquiring consent on the login:

<Auth0Provider
        domain={process.env.AUTH0_DOMAIN}
        audience="https://api/tv-shows"
        scope="read:shows"

I did not test in prod, but in fact, it makes sense to not give consent to a user that logged in but was not asked for specific allowing your api. Adding these lines will ask that when authorising.

s3vi26 commented 4 years ago

Is there a way to get the jwt id_token when using only this package? i can get the accessToken with: { accessToken } = useAuth(true) However, I need the encoded jwt id_token. Any help is appreciated!

ties-v commented 4 years ago

I faced the same issue. I've looked into it and this are my findings:

All applications within the same tenant in Auth0 are default flagged as first party. By enabling Allow skipping user consent in the settings of an API, first party apps don't need extra consent.
However, as an application running on localhost can be any application, so Auth0 requires explicit consent.
My current workaround is that I've added a custom domain name to my hosts file, so my development server is now accessible by (for example) mysite.local. The only thing required is adapting the Auth0 application settings: remove all callback etc links to localhost (this is important because when there is anywhere in the application setting a reference to localhost, it won't work) and replace them by the ones with mysite.local. This makes it work locally.

I don't know if this package should be adapted to work with both localhost and production, but it seems that the suggestion @twilly86 does is feasible. What do you think, @sandrinodimattia?

benheb commented 4 years ago

Is there a way to get the jwt id_token when using only this package? i can get the accessToken with: { accessToken } = useAuth(true) However, I need the encoded jwt id_token. Any help is appreciated!

@s3vi26 or anyone else have any luck here? I really need the full JWT token as well.

benheb commented 4 years ago

@s3vi26 never mind. Passing in audience to useAuth will change token from opaque to JWT and all works as expected.

dafnarosenblum commented 4 years ago

@benheb the id_token and access_token are two different things coming back from Auth0. If you open the network tab in the dev tools you can see that both of them return in the token call to auth0. I added a PR that returns the full object (https://github.com/sandrinodimattia/use-auth0-hooks/pull/15)

FMGordillo commented 4 years ago

So, no updates on this? 😢

hannah-austin93 commented 4 years ago

I am also struggling to get JWT using this method. I have the audience and scope set correctly, but am still getting the consent required error even after passing the consent screen. Are there any updates on this, please?

benheb commented 4 years ago

@hannah-austin93 @FMGordillo I ended up going with react-use-auth instead, maybe worth exploring (https://www.npmjs.com/package/react-use-auth) as activity here is minimal.

moxious commented 4 years ago

I'm having a lot of the same issues. The useAuth hook method broadly works, except getting an access token or an id token. I've tried many iterations of audience and scope, and nothing seems to be coming back.

A thing that may be missing in docs here is what kind of app you need to set up on the Auth0 side. I have an SPA type app, but clearly there are some missing concepts here. Within the context of an SPA app, you can't really provide authorized endpoints to get something valid to put into the "audience" field, so it appears whatever you do there is wrong.

ties-v commented 4 years ago

Consent will always be required when using localhost as per Auth0 docs: https://auth0.com/docs/api-auth/user-consent#skipping-consent-for-first-party-applications

sandrinodimattia commented 4 years ago

All of the concepts of this library have been moved to the official Auth0 SDK for React (https://github.com/auth0/auth0-react), so I'll be archiving this repository shortly.

sandrinodimattia / use-auth0-hooks

Access Token on Local Host #8