Dev - SSR - Sanctum - Browser hard refresh redirect to login

[thomizzi]

Version

module: 5.0.0-1624817847.21691f1
nuxt: 2.15.7

Nuxt configuration

mode:

• universal
• spa

Nuxt configuration

  axios: {
    baseURL: 'https://test.test/api/v1/'
  },
  ssr: true,
  auth: {
    redirect: {
      login: '/login',
      logout: '/',
      callback: false,
      home: '/'
    },
    strategies: {
      local: {
        provider: 'laravel/sanctum',
        url: 'https://test.test',
        endpoints: {
          login: {
            url: '/api/v1/auth/login',
            method: 'post'
          },
          user: {
            url: '/api/v1/auth/user',
            method: 'get'
          }
        }
      }
    }
  },

Reproduction

• Login to the app
• Nav to /random-stuff/1
• Refresh the browser

What is expected?

• Nuxt redirect to /login instead of /random-stuff/1

What is actually happening?

• Nuxt redirect to /login

Additional information

First login

Login seems fine
✅ GET - 204 - /sanctum/csrf-cookie

✅ POST - 201 - /api/v1/auth/login - Response with the token
{"token":"1|011qtLINVWL4RfoLkrYwG9GHGEW6gL20MwcMmfcX"}

✅ GET - 200 - /api/v1/auth/user - Response with the user
{"id":1,"given_name":"Admin"}

✅ Redirect to the dashboard (home: '/')

Browser refresh (F5)

✅ GET - 200 - /api/v1/auth/user - Response with the user
{"id":1,"given_name":"Admin"}

🐛 Stay on /login

---

login.vue

I can bypass the problem by performing the following method in created(), but that's ugly. And it doesn't keep the browsing history.

created () {
  if (this.$auth.user) {
    this.$router.push(this.localePath('/'))
  }
},

---

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

Laravel

routes/api.php

Route::post('/v1/auth/login', [AuthController::class, 'login']);

Route::middleware('auth:sanctum')->group(function () {
    Route::get('/v1/auth/user', [AuthController::class, 'user']);
}

AuthController

public function login(Request $request)
{
    if (!Auth::attempt($request->only('email', 'password'))) {
        return response()->json([
            'message' => 'Invalid login details'
        ], 401);
    }
    
    $user = User::where('email', $request['email'])->firstOrFail();
    
    $token = $user->createToken('auth_token')->plainTextToken;
    
    $response = [
        'token' => $token,
    ];
    
    return response($response, 204);
}
public function user(Request $request)
{
    return $request->user();
}

[ilearnbydoing]

facing a similar issue, any luck

[mjedari]

I have the same problem

[thomas4Bitcraft]

Same problem - is there already a solution?

[johnymanuelli]

Same problem.

[mjedari]

I solved the problem. By checking header on laravel income requests I found those that were sent by server (in SSR mode) had wrong referer header. For me was ip address 192.168.0.53:3000 (and this is the ip that nuxt dev serves your application).

I use domian (http://mydomain.test) in my local dev envirement. So I forced nuxt auth user check requests to use domain name as a referer header and this fix the issue.

laravelSanctum: {
    provider: "laravel/sanctum",
    url: "http://api.mydomain.test",
    endpoints: {
        login: { url: "/v1/auth/login", method: "post" },
        logout: { url: "/v1/auth/logout", method: "post" },
        user: {
            url: "/v1/auth-check",
            method: "get",
            withCredentials: true,
            headers: {
                Referer: "http://mydomain.test/" // <- here
            }
        }
    }
}

More info

[wei10cool]

I solved the problem. By checking header on laravel income requests I found those that were sent by server (in SSR mode) had wrong referer header. For me was ip address 192.168.0.53:3000 (and this is the ip that nuxt dev serves your application).

I use domian (http://mydomain.test) in my local dev envirement. So I forced nuxt auth user check requests to use domain name as a referer header and this fix the issue.

laravelSanctum: {
    provider: "laravel/sanctum",
    url: "http://api.mydomain.test",
    endpoints: {
        login: { url: "/v1/auth/login", method: "post" },
        logout: { url: "/v1/auth/logout", method: "post" },
        user: {
            url: "/v1/auth-check",
            method: "get",
            withCredentials: true,
            headers: {
                Referer: "http://mydomain.test/" // <- here
            }
        }
    }
}

More info

this is not working

[bmulholland]

See #1197 for SSR issues