react-auth0-spa.js
source link: https://gist.github.com/klequis/fd9c3cf5b025cc26a282ea30ef8ff6da
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
@klequis Looking at the code, is the only change the fact that getTokenSilently
is exported?
I wonder if it's better to export the whole Auth0Client
instance from the module rather than do it method by method.
Author
klequis commented on Jul 13, 2019
For my immediate need the only thing that needs to be outside of the hook is getTokenSilently. I haven't thought of a use case where any of the other methods would need to be.
On the other hand isAuthenticated and loading need to get into props so changes trigger render and doing that with a provider seems a good approach. Having the user info available from the provider is also convenient.
I don't really like having one part of of it available via one mechanism and another part via another mechanism but I don't see a better choice.
I do think having the Auth0Client methods wrapped and setting isAuthenticated & loaded the way it is being done is beneficial as if it were not, people would just wrap it themselves because that functionality is needed.
I played with it a bit today but didn't come to any final conclusion. Will do some more in the next few days.
Cheers
@klequis Things seem to work fine the first time around, but on refresh I keep getting a getAuth0Client
error. Have you run into this at all?
Author
klequis commented on Aug 28, 2019
@thkamahele
I did have a similar problem on an earlier iteration of this code where the client
(line 44) would fall out of scope. To solve it I wrote the getAuth0Client() function and have not had a problem since.
Can you reply with the full error message you are getting?
What is the let client
doing on line 14. Maybe this is JS ignorance issue. Why would client exist on the check on the next line?
niallmc commented on Sep 18, 2019 •
@klequis I have tried using this, but it seems to be asking for a new token on every call of getTokenSilently when I use it.
update: This is what I did to resolve my issue:
let _initOptions, _client
const getAuth0Client = () => {
return new Promise(async (resolve, reject) => {
let client
if (!client) {
try {
client = await createAuth0Client(_initOptions)
resolve(client)
} catch (e) {
reject(new Error('getAuth0Client Error', e))
}
}
})
}
export const getTokenSilently = async (...p) => {
if(!_client) {
_client = await getAuth0Client()
}
return await _client.getTokenSilently(...p)
}
thekamahele commented on Sep 18, 2019 •
When initializing the _initOptions get undefined
@klequis I have a similar implementation here, my question is where did you place your <Auth0Context.Provider> with Redux? Did you completely avoided redux state for all auth0 client work and relied on getSilentToken()
for all your api calls with Redux? I am having trouble connecting the dots on either trying to get autho0Client into redux state or wrap the <Auth0Context.Provider> around
MStumpp commented on Apr 9, 2020 •
@artem-alek Did you find a solution. Facing a similar question.
I've been having this same issue. I manually initialized _initoptions with the props that I was passing to Auth0Provider, and it seems to have resolved the issue.
@stevehobbsdev @klequis is this resolved? I feel like being able to call the React-SDK from an action is basic when you have a MERN stack. Surprised this is not available through the SDK yet as I also face the Hooks error when trying.
Gra55h0pper commented on Dec 12, 2020 •
Same issue/question here. Wondering if there's a good solution to this?
Edit: here's the code based on the above discussions that (so far) seems to work. Would be nice to see a fully Auth0 supported version though.
// Note: this code extends '@auth0/auth0-react.js' which is built
// on '@auth0/auth0-spa-js' which exports 'createAuth0Client'.
import createAuth0Client from '@auth0/auth0-spa-js'
let _initOptions = {
domain: AUTH_DOMAIN,
client_id: AUTH_WEB_APP_CLIENT_ID,
}
let _client
const getAuth0Client = () => {
return new Promise(async (resolve, reject) => {
let client
if (!client) {
try {
client = await createAuth0Client(_initOptions)
resolve(client)
} catch (e) {
reject(new Error('getAuth0Client Error', e))
}
}
})
}
export const getApiToken = async (...p) => {
if (!_client) {
_client = await getAuth0Client()
}
return await _client.getTokenSilently(...p)
}
@iamchathu, yes, auth0-react
is the SDK I'm using.
If you look at the auth0-react
sources you can see it calls auth0-spa-js
(which exports createAuth0Client
) under the hood.
Most importantly though, auth0-react
(still) doesn't support getTokenSilently
outside of a component (i.e. without the need for using a React Hook), does it?
fieldju commented on Dec 15, 2020 •
Are you using your snippet to just create an extra client that getApiToken uses and you use this in addition to auth0-react?
@fieldju, yes, at this point in time I'm wrapping the App in auth0-react's Auth0Provider
for general user-login besides using the snippet for getting API-tokens. I'm assuming that indeed means two clients are being created. Though I haven't seen any issues with that, I think it would be nice if Auth0 would provide a clean solution.
Gra55h0pper commented on Dec 17, 2020 •
Update: I do not understand why, but I found my snippet above does not work for Safari where it works fine for Chrome (???).
Also, I learned Auth0 recommends against storing the access-token in local storage (Redux in my case). See: https://auth0.com/blog/complete-guide-to-react-user-authentication/#Calling-an-API. I guess this may explain why they don't support getting a token outside of a component?
Anyway, I'm changing the architecture of my App getting the getAccessTokenSilently
function from the useAuth0
hook in every UI component that needs to call the API and then passing it explicitly to the redux-thunk action that's calling the API-endpoint. It seems much more verbose than necessary, but it works.
@Gra55h0pper This is how I am solving this for my project.
A PR with usage examples: SimplQ/simplQ-frontend#483
@daltonfury42 Thanks much. I'll take a look. It will unclutter my code.
SimplQ looks cool! I think there's definitely space for an App like that!
For anyone reaching this gist looking for a solution for @auth0/auth0-react
I have a working approach here https://stackoverflow.com/a/68407340/6469059
@nelsonfncosta Thank you so much, this is absolutely what I wanted and after so much time struggling and dropping my projects because of this, I can finally say this is what I wanted to begin with. +1 sir.
Would love any insight from others, if this solution is robust and can it have any pitfalls?
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK