manchenkoff / nuxt-auth-sanctum

Nuxt module for Laravel Sanctum authentication
https://manchenkoff.gitbook.io/nuxt-auth-sanctum/
MIT License
163 stars 21 forks source link

[Question] Not loging a user after register #215

Closed pwnz22 closed 5 days ago

pwnz22 commented 5 days ago

Describe the bug

Token mode not working properly when i register a user.

Registering user getting: {token: token} and it's not setting the token to cookies.

  try {
    await sanctumFetch('/auth/register', {
      method: 'POST',
      body: credentials,
    });

    await refreshIdentity();

    navigateTo('/login');
  } catch (error) {
    recordErrors(error.data);
  }

To Reproduce

Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. See error

Expected behavior

Login after registrating

Actual behavior

Not loggin after register. The refreshIdentity method returning error because token is not set.

Module information

  sanctum: {
    logLevel: 5,
    mode: 'token',
    baseUrl: 'http://localhost:8000/api/v1', // Laravel API
    endpoints: {
      // csrf: 'http://localhost:8000/sanctum/csrf-cookie',
      user: '/users/me',
      login: '/auth/login',
      logout: '/auth/logout',
    },
  },

Nuxt environment:

Laravel environment:

<?php
// REPLACE WITH YOUR FILE CONTENT!

return [
    'paths' => ['*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => [
        env('FRONTEND_URL', 'http://localhost:3000'),
    ],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

Logs

Please provide module logs that can help to understand the problem. Make sure to change sanctum.logLevel to 5 in your nuxt.config.ts. CSR logs can be found in the browser, while SSR logs can be found in the server terminal.

nuxt-auth-sanctum:csr:debug [request] added default headers ['Accept']
browser.mjs?v=3bd5ad27:44 nuxt-auth-sanctum:csr:debug [request] authentication token is not set in the storage
browser.mjs?v=3bd5ad27:44 nuxt-auth-sanctum:csr:trace Request headers for "/auth/register" {accept: 'application/json'}
browser.mjs?v=3bd5ad27:44 nuxt-auth-sanctum:csr:debug [response] skipping headers validation on CSR
browser.mjs?v=3bd5ad27:44 nuxt-auth-sanctum:csr:trace Response headers for "http://localhost:8000/api/v1/auth/register" {cache-control: 'no-cache, private', content-type: 'application/json'}
register.vue:33 nuxt-auth-sanctum:csr:debug [request] added default headers ['Accept']
browser.mjs?v=3bd5ad27:44 nuxt-auth-sanctum:csr:debug [request] authentication token is not set in the storage
browser.mjs?v=3bd5ad27:44 nuxt-auth-sanctum:csr:trace Request headers for "/users/me" {accept: 'application/json'}
register.vue:33 

       GET http://localhost:8000/api/v1/users/me 401 (Unauthorized)
(anonymous) @ index.mjs?v=3bd5ad27:21
$fetchRaw2 @ ofetch.03887fc3.mjs?v=3bd5ad27:258
await in $fetchRaw2
$fetch2 @ ofetch.03887fc3.mjs?v=3bd5ad27:316
refreshIdentity @ useSanctumAuth.js?v=3bd5ad27:30
onSubmit @ register.vue:33
await in onSubmit
cache.<computed>.cache.<computed> @ runtime-dom.esm-bundler.js?v=3bd5ad27:1671
callWithErrorHandling @ runtime-core.esm-bundler.js?v=3bd5ad27:197
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?v=3bd5ad27:204
invoker @ runtime-dom.esm-bundler.js?v=3bd5ad27:713
Show 8 more frames
Show lessUnderstand this error
browser.mjs?v=3bd5ad27:44 nuxt-auth-sanctum:csr:debug [response] skipping headers validation on CSR
browser.mjs?v=3bd5ad27:44 nuxt-auth-sanctum:csr:trace Response headers for "http://localhost:8000/api/v1/users/me" {cache-control: 'no-cache, private', content-type: 'application/json'}

Additional context

The login method works. Token is setting and refreshIdentity returning properly a user.

manchenkoff commented 5 days ago

Hey @pwnz22, since registration is not covered by the module, the token in API response won't be stored in the storage automatically. It is done only during login, you can find the details in the docs.

The call of refreshIdentity method after registration makes sense only with cookie mode since token will be propagated to the client automatically, however for token mode we have to work with token storage and this logic is encapsulated inside login method.

If you want to make it work w/o calling login then you can use token storage in your code by following the example used in the module - useSanctumAuth.ts, and after that refreshIdentity method will do the rest.

Feel free to ask for assistance in writing this code if required!

pwnz22 commented 5 days ago

Thanks for quick response. Okay, copied some code from useSanctumAuth.ts and now it's ok.

Thank you!