Django with Sveltekit authentication
-
I'm trying to authenticate my Django back-end with Sveltekit front-end.
I've followed the Django SSO Tutorial and it was smooth: https://fusionauth.io/blog/2023/01/24/single-sign-on-django-fusionauth
But when it comes to Sveltekit site, I didn't know how to do it.I'm trying to Use Auth.js (the next version of NextAuth 'Framework Agnostic'), and it provides an adapter for FusionAuth but it's not well documented (yet): https://next-auth.js.org/providers/fusionauth
src/hooks.service.ts
import { SvelteKitAuth } from "@auth/sveltekit" import FusionAuthProvider from "@auth/core/providers/fusionauth" import { FUSIONAUTH_ISSUER, FUSIONAUTH_CLIENT_ID, FUSIONAUTH_CLIENT_SECRET } from "$env/static/private" export const handle = SvelteKitAuth({ providers: [ FusionAuthProvider({ id: 'fusionauth', name: 'FusionAuth', issuer: FUSIONAUTH_ISSUER, clientId: FUSIONAUTH_CLIENT_ID, clientSecret: FUSIONAUTH_CLIENT_SECRET }), ] })
src/routes/+page.svelte
<script lang="ts"> import { signIn, signOut } from "@auth/sveltekit/client" import { page } from "$app/stores" </script> <h1>SvelteKit Auth Example</h1> <p> {#if $page.data.session} {#if $page.data.session.user?.image} <span style="background-image: url('{$page.data.session.user.image}')" class="avatar" /> {/if} <span class="signedInText"> <small>Signed in as</small><br /> <strong>{$page.data.session.user?.name ?? "User"}</strong> </span> <button on:click={() => signOut()} class="button">Sign out</button> {:else} <span class="notSignedInText">You are not signed in</span> <button on:click={() => signIn("fusionauth")}>Sign In with FussioAuth</button> {/if} </p>
I have the Authorized redirect URLs as: http://localhost:8000/oidc/callback/, http://localhost:5173/api/auth/callback/fusionauth
for Django and Sveltekit respectively.
And I have the Authorization Code selected in the Enabled grants as specified in the Auth.js documentation.When I click the login button I'll get:
Error: Not found: /auth/csrf
Is it possible to authenticate both Django and Sveltekit using FusionAuth, and how it is done if that's the case?
-
Thanks for using FusionAuth!
I don't have any experience with SvelteKit, but this new NextJS quickstart might be of interest to you:
https://fusionauth.io/blog/2023/04/26/nextjs-single-sign-on
Dan