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

thomizzi commented 3 years ago

Version

module: 5.0.0-1624817847.21691f1 nuxt: 2.15.7

Nuxt configuration

mode:

[x] 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 :white_check_mark: GET - 204 - /sanctum/csrf-cookie

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

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

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

Browser refresh (F5)

:white_check_mark: 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

[x] I have tested with the latest Nuxt version and the issue still occurs
[x] I have tested with the latest module version and the issue still occurs
[x] 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 commented 3 years ago

facing a similar issue, any luck

mjedari commented 3 years ago

I have the same problem

thomas4Bitcraft commented 3 years ago

Same problem - is there already a solution?

johnymanuelli commented 3 years ago

Same problem.

mjedari commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

See https://github.com/nuxt-community/auth-module/issues/1197 for SSR issues

akr4m commented 2 years ago

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

Not working

nuxt-community / auth-module