I know there is no official SvelteKit plugin for direct use, so I am trying to implement a manual approach using basic API functions in JS for server side authentication and session management, using auth0.js version 9.11.
Using the following page, I can redirect the user to the Auth0 universal login page, and the user is redirected to my landing page after a successful login. My plan is to acquire the user details from the user token and save these details to a database (with the access token) for login session management.
However, I keep getting the following error within the landing page:
Uncaught (in promise) TypeError: can't assign to property "__enableIdPInitiatedLogin" on "#access_token=eyJhbGciOi...<very long token>...BNW1uzA&scope=openid%20profile%20email&expires_in=7200&token_type=Bearer&state=rtre4": not an object
The code that is used to fetch user details and doesn’t work is as follows:
<script lang="ts">
import { onMount } from 'svelte';
onMount(async () => {
// Initialize the Auth0 application
var webAuth = new auth0.WebAuth({
domain: '<domain>',
clientID: '<clientId>'
});
//test
console.log(window.location.hash);
// Parse the URL and extract the Access Token
webAuth.parseHash(window.location.hash, function (err, authResult) {
if (err) {
return console.log(err);
}
// webAuth.client.userInfo(authResult.accessToken, function (err, user) {
// // This method will make a request to the /userinfo endpoint
// // and return the user object, which contains the user's information,
// // similar to the response below.
// });
});
});
</script>
<svelte:head>
<script src="https://cdn.auth0.com/js/auth0/9.11/auth0.min.js"></script>
</svelte:head>
<div class="content">
<p>Redirecting, please wait...</p>
</div>
I am attaching the screenshot that shows the complete error information.
The code that redirects the user to the universal login page is as follows:
<script lang="ts">
import Button from '@smui/button';
const login = () => {
// Initialize app - auth0 is defined as external script in <svelte:head>
var webAuth = new auth0.WebAuth({
domain: '<domain>,
clientID: '<clientid>'
});
// Calculate URL to redirect to
var url = webAuth.client.buildAuthorizeUrl({
clientID: '<clientid>', // string
responseType: 'token', // code or token
redirectUri: 'http://localhost:3000/login',
scope: 'openid profile email',
state: '<state>'
});
window.location = url;
}
</script>
<svelte:head>
<script src="https://cdn.auth0.com/js/auth0/9.11/auth0.min.js"></script>
</svelte:head>
<div class="content">
<Button on:click={login}>Login</Button>
</div>