How to do Sveltekit authentication using Laravel Sanctum

[misbahansori]

I want to ask how to do the authentication using Sveltekit and Laravel sanctum, I have already set up the Laravel backend and I am able to log in using email and password. After I logged in I got the cookie from the Laravel backend.

The first thing that I tried using Axios to make a login request to the server. The subsequent request to the server will automatically be treated as a logged-in user.

import { user } from '$lib/store/auth';
import { http } from '$lib/http';

async function login() {
  await http.get('sanctum/csrf-cookie');
  const response = await http.post('api/login', { email, password });
  $user = response.data;
}

but when I make a request from <script context="module"> it will be treated as the unauthenticated user.

<script context="module">
  import { http } from '$lib/http';

  export function load() {
    http.get('http://localhost:8001/api/user').then((res) => {
      // Unauthenticated 🤔
      console.log(res.data);
    });
  }
</script>

My assumption is that the cookie from laravel sanctum is saved on the client-side. meanwhile, the second request is made on the server so it doesn't have the cookie.

What is the best approach to authenticating users using Laravel sanctum?

[benaltair]

As long as you're using something like the Node adapter, this should be possible. Serverless solutions like Netlify/Vercel will need different approaches for auth.

I would suggest using the native fetch API which Kit has optimized to work in both server and client environments, rather than Axios perhaps. I don't have a lot of experience with cookie-based auth on Kit but from what I've seen you should be starting by looking into the getSession() hook for server-side auth within Kit.

[daison12006013]

You may follow my guide here https://github.com/daison12006013/sveltekit-starter/blob/develop/guides/laravel-sanctum.md