I am currently implementing Auth0 in my SolidJS application with SSR. (Solid start).
The issue i am facing is when i call auth0.getTokenSilently() i get the error console log “Failed to load resource: the server responded with a status of 403 ()” however looking at my network call the call to /oauth/token returned 200. And looking at the response it provided a valid access_token.
Console:
Handeling redirect
login.tsx:33 Resutl: {appState: undefined}
login.tsx:35 Getting token
dev-1nl95fdx.us.auth0.com/authorize?client_id=[REMOVED]&scope=openid+profile+email&prompt=none&response_type=code&response_mode=web_message&state=cmo0ZHhYdGF%2BYTBjSEQ1QU9KdEE4ZkJxejR4TF9YNmxaUmNOOWplSkxtMQ%3D%3D&nonce=akxQV2N1MmprU3RPQlBYdUFaOXlWZzhwa1FSSmZaTzMtM3lhaU9iTGlJcg%3D%3D&redirect_uri=http%3A%2F%2Flocalhost%3A3000&code_challenge=aDLWb_ILSghUDh6krgUjpckKdX5S7AUYR2M_U6d1epw&code_challenge_method=S256&auth0Client=eyJuYW1lIjoiYXV0aDAtc3BhLWpzIiwidmVyc2lvbiI6IjIuMC4xIn0%3D:1 Failed to load resource: the server responded with a status of 403 ()
login.tsx:43 Error getting token: Error: Timeout
at utils.ts:57:11
My Code:
import { createSignal, onMount } from "solid-js";
import { A, useLocation } from "solid-start";
import Counter from "~/components/Counter";
import { Auth0Client } from "@auth0/auth0-spa-js";
import AuthService from "~/services/AuthService";
export default function Login() {
const [error, setError] = createSignal<string | null>(null);
const location = useLocation();
onMount(() => {
const auth0 = new Auth0Client({
domain: "https://[REMOVED].us.auth0.com",
clientId: "[REMOVED]",
cacheLocation: "localstorage",
});
if (location.query.code == null) {
console.log("Redirecting");
auth0.loginWithRedirect({
authorizationParams: {
redirect_uri: "http://localhost:3000/auth/login",
audience: "[REMOVED]",
scope: "openid profile email",
},
});
} else {
console.log("Handeling redirect");
auth0
.handleRedirectCallback()
.then((result) => {
console.log("Resutl:", result);
console.log("Getting token");
auth0
.getTokenSilently()
.then((token) => {
console.log("Token: ", token);
AuthService.setToken(token, true);
})
.catch((error) => {
console.log("Error getting token: ", error);
});
})
.catch((error) => {
console.log("Login failed");
setError("Login failed");
});
}
});
return (
<main class="text-center mx-auto text-gray-700 p-4">
<h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">Login</h1>
<span>Login</span>
</main>
);
}
If i don’t separate with the if (location.query.code == null) it will just start a never ending redirect loop to login on Auth0.
Response headder for the /oauth/token request
1. Request URL:
https://dev-1nl95fdx.us.auth0.com/oauth/token
2. Request Method:
POST
3. Status Code:
200
4. Remote Address:
104.16.170.253:443
5. Referrer Policy:
strict-origin-when-cross-origin
1. Response Headers
1. access-control-allow-credentials:
true
2. access-control-allow-methods:
2.
3. access-control-allow-origin:
http://localhost:3000
4. access-control-expose-headers:
X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset
5. alt-svc:
h3=":443"; ma=86400, h3-29=":443"; ma=86400
6. cache-control:
no-store
7. cf-cache-status:
DYNAMIC
8. cf-ray:
77fd6eac6aa69e58-SJC
9. content-encoding:
br
10. content-type:
application/json
11. date:
Mon, 26 Dec 2022 23:00:23 GMT
12. ot-baggage-auth0-request-id:
77fd6eac6aa69e58
13. ot-tracer-sampled:
true
14. ot-tracer-spanid:
62af33f81f60d67a
15. ot-tracer-traceid:
21dd52f940e3bb7a
16. pragma:
no-cache
17. server:
cloudflare
18. strict-transport-security:
max-age=31536000
19. traceparent:
00-000000000000000021dd52f940e3bb7a-62af33f81f60d67a-01
20. tracestate:
auth0-request-id=77fd6eac6aa69e58,auth0=true
21. vary:
Accept-Encoding, Origin
22. x-auth0-requestid:
6c295a8ce98e147e96a4
23. x-content-type-options:
nosniff
24. x-ratelimit-limit:
30
25. x-ratelimit-remaining:
29
26. x-ratelimit-reset:
1672095624