Getting User Data in Universal Login with SvelteKit

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>

Did you ever get a solution working for this?

FWIW I took a slightly different approach. Look at the source for the Next.js plugin and you can (kind of) easily adapt it to Sveltekit. Was able to get it working in a few days.

Even if you don’t go with their approach to cookies, which is a bit complicated, you can look at the overall flow and their use of the JS OpenID library and should be able to use that as a template.