Laravel12 Sanctum x Angular20 - Auth after refreshing does not work

[Tristan-BS]

Body

So if i refresh my page which is secured by my auth-guard and checks if the user is logged in, i get is not logged in from my backend laravel Auth controller. I dont know where to ask this question so im doing it here if someone had the same or an issue like this.

So if I press on the button after the login go to dashboard it does work and the user check does work:
[2025-08-25 13:56:04] local.INFO: Session dump: {"_token":"xJFXXnpsBc6iuXnU1HmG5Qa4N2axnXc55ZIg2xBk","_previous":{"url":"[http://localhost:8000/sanctum/csrf-cookie"},"_flash":{"old":[],"new":[]},"login_web_59ba36addc2b2f9401580f014c7f58ea4e30989d":15}](http://localhost:8000/sanctum/csrf-cookie%22%7D,%22_flash%22:%7B%22old%22:[],%22new%22:[]%7D,%22login_web_59ba36addc2b2f9401580f014c7f58ea4e30989d%22:15%7D) [2025-08-25 13:56:04] local.INFO: checkCurrentUser: User is logged in {"user_id":15}

But if i try to edit the link from localhost:4200/login to locahost:4200 or refresh the page localhost:4200 it does not work and send me back to the login and it logs a complete new Session dump _token:
[2025-08-25 13:57:49] local.INFO: Session dump: {"_token":"MLMlhAfg8U9tL1Dtv6e0IJIzHrwL41O12iU9dq1q"} [2025-08-25 13:57:49] local.INFO: checkCurrentUser: No user logged in

I dont know what im doing wrong tbh - Every help appreciated!

My files:

login.ts

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { MatDialog } from '@angular/material/dialog';
import { HelpDialog } from '../../../shared/dialogs/help-dialog/help-dialog';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
 
import { environment as devEnvironment } from '../../../../environments/environment.development';
import { XSRFHelper } from '../../../core/helpers/xsrf-helper';
import { routes } from '../../../app.routes';
import { Router } from '@angular/router';
@Component({
  selector: 'app-login',
  imports: [CommonModule, ReactiveFormsModule, FontAwesomeModule],
  templateUrl: './login.html',
  styleUrl: './login.scss'
})
export class Login {
  showPassword = false;
  eyeAnimate = false;
  pulseEye = false;
  private timer: any;
  private pulseTimer: any;
  userORemail = new FormControl('');
  password = new FormControl('');
  remember = new FormControl(false);
 
  private baseURL = devEnvironment.apiURL.replace('/api', '');
  constructor(
    private dialog: MatDialog,
    private http: HttpClient,
    private cookieHelper: XSRFHelper,
    private router: Router
  ){}
 
  getCSRF(): Observable<any> {
    return this.http.get(this.baseURL + '/sanctum/csrf-cookie', { withCredentials: true });
  }
 
  login(): void {
    const userData = {
      userORemail: this.userORemail.value ?? '',
      password: this.password.value ?? ''
    };
 
    this.getCSRF().subscribe({
      next: () => {
        this.http.post(this.baseURL + '/login', userData, { 
          withCredentials: true,
          headers: { 'X-XSRF-TOKEN': this.cookieHelper.getXsrfTokenFromCookie() ?? '' }
        })
          .subscribe({
            next:(res: any) => {
              if (res.message === 'Bereits eingeloggt') {
                alert('Bereits eingelogged!');
              } else if (res.message === 'Login erfolgreich!') {
                alert('User logged in!');
              } else {
                alert (res.message);
              }
            },
            error:(err) => {
              console.error('Error logging in: ', err);
              alert('Error logging in!');
            }
          })
      }
    })
  }
}

AuthController:

public function Authenticate(Request $request) {
        $credentials = $request->validate([
            'userORemail' => 'required|string',
            'password' => 'required|string'
        ]);
 
        $login = $credentials['userORemail'];
        $password = $credentials['password'];
 
        $field = filter_var($login, FILTER_VALIDATE_EMAIL) ? 'email' : 'username'; // Determine if login is email or username
 
        if (Auth::check()) { // If already logged in
            Log::info('Authenticate: User already logged in', ['user_id' => Auth::id()]); // Log already logged in
            return response()->json([
                'message' => 'Bereits eingeloggt',
                'session' => $request->session()->all(),
                'cookies' => $request->cookies->all(),
                'user' => Auth::user()
            ], 200);
        }
 
        if (Auth::attempt([$field => $login, 'password' => $password])) { // Attempt login
            $request->session()->regenerate(); // Prevent session fixation
 
            Auth::login(Auth::user()); // Ensure user is logged in
 
            Log::info('Authenticate: Login successful', ['user_id' => Auth::id(), 'field' => $field]); // Log successful login
 
            return response()->json([
                'message' => 'Login erfolgreich!',
                'session' => $request->session()->all(),
                'cookies' => $request->cookies->all(),
                'user' => Auth::user()
            ], 200);
        }
 
        Log::warning('Authenticate: Login failed', ['login' => $login, 'field' => $field]); // Log failed login
 
        return response()->json([
            'message' => 'Login fehlgeschlagen',
            'session' => $request->session()->all(),
            'cookies' => $request->cookies->all()
        ], 401);
 
    }
 
    // Check if user is logged in
    public function checkCurrentUser(Request $request) {
        Log::info('Session dump: ', $request->session()->all());
 
        $user = Auth::user(); // Get current user
 
        if ($user) { // If user is logged in
            Log::info('checkCurrentUser: User is logged in', ['user_id' => $user->id]); // Log user present
            return response()->json([
                'loggedIn' => true,
                'user' => $user,
                'session' => $request->session()->all(),
                'cookies' => $request->cookies->all()
            ], 200);
        } else { // If not logged in
            Log::info('checkCurrentUser: No user logged in'); // Log no user
            return response()->json([
                'loggedIn' => false,
                'user' => null,
                'session' => $request->session()->all(),
                'cookies' => $request->cookies->all()
            ], 200);
        }
    }

auth-guard.ts:

import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { environment as devEnvironment } from '../../../environments/environment.development';
import { catchError, of, map } from 'rxjs';
import { XSRFHelper } from '../helpers/xsrf-helper';
 
export const authGuard: CanActivateFn = (route, state) => {
  const http = inject(HttpClient);
  const router = inject(Router);
  const xsrfHelper = inject(XSRFHelper);
 
  const baseURL = '[http://localhost:8000/';](http://localhost:8000/%27;)
  const xsrfToken = xsrfHelper.getXsrfTokenFromCookie(); // Get the XSRF token from cookie
 
 
  // Check if user is logged in / current user authentication status
  return http.get<{ loggedIn: boolean, user?: any }>(baseURL + 'auth/current-user', { 
    withCredentials: true,
    headers: { 'X-XSRF-TOKEN': xsrfToken ?? ''}
   }
  ).pipe(
    map(res => {
      console.log('[Authguard] API Response: ', res);
      if (res.loggedIn && res.user && res.user.username) {
        return true; // Allow route to dashboard
      } else {
        router.navigate(['login']);
        return false;
      }
    }),
    catchError(() => {
      router.navigate(['login']);
      return of(false);
    })
  );
};
 
app.routes.ts

import { Routes } from '@angular/router';
import { Dashboard } from './components/dashboard/dashboard';
import { WeeklySchedule } from './components/tools/weekly-schedule-tool/weekly-schedule/weekly-schedule';
import { Login } from './components/auth/login/login';
import { UserManagement } from './components/user-management/user-management';
import { authGuard } from './core/guards/auth-guard';

export const routes: Routes = [
{
path: 'login',
component: Login,
title: 'Login to KAT-Dashboard',
data: { headerType: 'login', headerTitle: 'KAT-Dashboard' }
},

{ 
    path: '',
    component: Dashboard, 
    title: 'Dashboard',
    canActivate: [authGuard],
    data: { headerType: 'dashboard_standard', headerTitle: 'KAT-Dashboard' }
},

{
    path: 'user-management',
    component: UserManagement,
    title: 'User Management',
    data: {headerType: 'user-management', headerTitle: 'KAT-Dashboard' }
},

{
    path: 'wochenplan',
    component: WeeklySchedule,
    title: 'Wochenplan',
    data: { headerType: 'weekly_schedule', headerTitle: 'Wochenplan' }
},

// Wildcard-Route for invalid paths
{ path: '**', redirectTo: '', pathMatch: 'full'}

];

 
.env

SESSION_DRIVER=cookie
SESSION_LIFETIME=540
SESSION_ENCRYPT=true
SESSION_PATH=/
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost,localhost:8000,localhost:4200

SESSION_SAME_SITE=lax
SESSION_SECURE_COOKIE=false

 
cors

'paths' => ['api/*', 'sanctum/csrf-cookie', 'login', 'auth/current-user'],

'allowed_methods' => ['*'],

'allowed_origins' => ['http://localhost:4200', 'http://localhost:8000'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true,

 
Im sorry if this topic does not fit exactly for this laravel

### Guidelines

- [X] I have read and understood this category's [guidelines](https://github.com/orgs/community/discussions/51384) before making this post.

[Tristan-BS]

Problem was SSR lol - Just disabled it