Closed tibotiber closed 2 months ago
Hi @tibotiber ,
Besides domain
and clientId
, could you provide the other configuration options
you're passing to createAuth0Client
?.
Additionally, can you try reproducing the same issue on our Javascript Sample App ?
Hi @nandan-bhat, below are the options used in createAuth0Client
:
domain
client_id
audience
redirect_uri = window.location.origin
useRefreshTokens = true
I'll give a shot to the Javascript Sample App and revert as well.
Any idea what could have changed between the 2 versions that produce this difference in behaviour?
PS: the sample app is using static files. That's very different from a react app which i'm setup with. I don't know how relevant would a repro be in that case. I'll still try, but do you have a sample react app with auth0-spa-js
somewhere?
Hi @tibotiber,
What is the structure of initOptions
?
After the upgrade (v2.1.3) createAuth0Client
should look like this.
Reference createAuth0Client
: https://auth0.github.io/auth0-spa-js/interfaces/Auth0ClientOptions.html
Reference AuthorizationParams
: https://auth0.github.io/auth0-spa-js/interfaces/AuthorizationParams.html
When did this change ? Here https://github.com/auth0/auth0-spa-js/releases/tag/v2.0.0
await createAuth0Client ({
domain: YOUR_DOMAIN,
clientId: YOUR_CLIENT_ID,
authorizationParams: {
audience: YOUR_AUDIENCE,
redirect_uri = window.location.origin
},
useRefreshTokens: true | false
});
If the current configuration differs from this configuration, feel free to attempt it and share the outcome here.
Question:
Is there any specific reason behind your decision not to use the auth0-react
SDK ? It's designed for React
and still relies on auth0-spa-js
.
Thanks for pointing that out @nandan-bhat. Yes, I've got the good format for the options. My codebase is in Typescript so that was quick to pick on and well documented on your side ✌️. Here is the code sample:
<Auth0Provider
domain={import.meta.env.VITE_AUTH0_DOMAIN}
clientId={import.meta.env.VITE_AUTH0_CLIENTID}
authorizationParams={{
audience: import.meta.env.VITE_AUTH0_AUDIENCE,
redirect_uri: window.location.origin,
}}
>
with useRefreshTokens
set directly in the createAuth0Client
call.
it's been a few years since we made the choice between auth0-react
and auth0-spa-js
so i don't have the full context anymore. But i think it boiled down to auth0-react
being a tiny wrapper around auth0-spa-js
(at least at the time) and the fact that it introduced one layer of potential delay when a new version (bugfix in particular) is available (e.g. spa-js updated but react package not yet).
I'm back on this now, will test a repro with the sample app.
I think I managed to reproduce the regression in the sample app. Check out https://github.com/tibotiber/auth0-javascript-samples/pull/1
The last commit shows how it used to work in v1.22 (no extra redirect)
https://github.com/auth0/auth0-spa-js/assets/5635553/47d28e57-accb-4e3b-a40b-19a86f47227c
while the previous commit shows the extra redirect in v2
https://github.com/auth0/auth0-spa-js/assets/5635553/6c08da80-84cc-4a53-85e9-da5f93855918
also it seems this only happens with useRefreshTokens: true
Hopefully this helps
Hello @tibotiber,
Thank you for the comprehensive details about the issue; it really helps. We will take some time to investigate and provide an update once we have more information.
Hello @tibotiber,
I have an update. Please try setting useRefreshTokensFallback: true
alongside useRefreshTokens: true
.
As you mentioned earlier, the use-case is related to useRefreshTokens: true
. In V1
, useRefreshTokensFallback
defaulted to true
, but in V2
, this default has been changed to false
. You need to explicitly set it to true
.
You can refer to the migration guide here (search for useRefreshTokensFallback
) for more details about this change. Also go through the documentation.
Here's how your V2
code should look:
// This configuration is for JavaScript. Adjust your TypeScript setup accordingly.
await createAuth0Client({
domain: YOUR_DOMAIN,
clientId: YOUR_CLIENT_ID,
authorizationParams: {
audience: YOUR_AUDIENCE,
redirect_uri: window.location.origin
},
useRefreshTokens: true,
useRefreshTokensFallback: true // Include this.
});
Let me know if this resolves the issue.
Hi @nandan-bhat, you nailed it! 🙂 This solved the issue, thanks for the help. I have definitely missed this point out when I went through the migration guide. I think I was too confident with the Typescript warnings being solved 😓.
Edit: v1 -> v2 migration shaved my bundle size, noiiiice :)
Checklist
Description
Hi,
I create this report on the recommendation of tyf from the community forum. I’m using @auth0/auth0-spa-js and I’ve just upgraded from 1.22.3 to 2.1.3. The documentation to guide the upgrade was great, thanks.
One issue i’m observing is if I refresh the page, it does a silent login. On v1, it’s pretty fast and doesn’t leave my domain. On v2, it seems to take one extra step, and redirects to?code=xxx&state=xxx temporarily before coming back. It also takes longer.
Is there a new option to get the previous behaviour?
Thanks :pray:
Reproduction
Here is a before/after video recording which I hope can help.
On v1.22.3
https://github.com/auth0/auth0-spa-js/assets/5635553/a5832993-074d-4f25-962f-558a1888cf17
On v2.1.3
https://github.com/auth0/auth0-spa-js/assets/5635553/8acf32b8-2274-49ad-b290-0287bc9631be
Additional context
Here is my
Auth0.tsx
providerand here is
PrivateRoute.tsx
auth0-spa-js version
2.1.3
Which framework are you using (React, Angular, Vue...)?
React
Framework version
16.14.0
Which browsers have you tested in?
Chrome