This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Redirected to login after refreshing any protected page #478
Comments
ghost
added
the
|
My current hackyish solution is to manually redirect back to the correct page from inside the login page: |
|
I'm having the same issue, I tried checkout out older versions of my app to see if it would work but they unfortunately didn't. I fiddled around with my own middlewares that I had in place, whether they were redirecting me badly, but it seems to be the auth ultimately. As OP mentioned I am using the basic local scheme, I didn't do anything to the auth since the first time I implemented it and after half a year of development and working fine, without updating my node_modules, it just stopped working. |
|
The same happens to me when I deploy the project in zeit now with nuxt/now-builder |
|
I had such a problem, I added the ip address to the token and then checked it on the server in middleware, whether it is equal to the ip address from the request. |
|
I had this problem also. When logging in I do it with axios and I manually set up auth. I do this mainly because I need my app to handle refresh tokens so you could just call the $auth.loginWith instead:
Then I get the user with axios as well and then I also give it to auth:
This also sets the loggedIn flag on auth so my middleware looks like this: In the log out functionality I just clear local storage and do: So I handle everything manually and it works out well in the end. |
|
So I figured it out and there is nothing wrong with the package at all as it is. The underlying issue for me, was the fact that Which just showed me towards the right way. Something to note: It worked fine with apache but we switched stack to nginx midway through development... // Edit: |
|
For me, the issue was with cookie settings. Basically, setting a Note: After changing this (locally) between |
|
Had the same problem when publishing to Heroku (production). First, it's good to provide a little bit of context: Packages nuxt.config.js Environment Variables Deployed successfully, but every single page reload not using a /middleware/debug_auth.js Then I've found something like this in the middle of logs: So I figured that Axios was trying to call Testing the API url with a SSL Checker like https://www.sslshopper.com/ssl-checker.html gave me a message like:
Indeed, my certificate issuer sent me a .crt file and a bundle file (which has, in theory, my purchased certificate + the intermediate certificate), but Heroku was complaining about the key. I had to find the intermediate certificate pointed by the SSL Checker by name (my case,
I see some people setting Would be great if this library can throw something in the logs when the TLS check fails. It would save a lot of time from this community figuring out how to solve this particular problem. |
|
Thanks @leonelsanchesdasilva ! I had exactly the same problem. The API had to be called locally via HTTPS and since nuxt-auth cannot reload the user, it logs out and causes this behavior. After adding It also seems to make sense to enable axios debug logs. Add this to your nuxt.config.js Then you will get something like this: |
|
Have the the same problem before. The auth module just catch all error in fetch user data request on server. This is not very dev friendly! Maybe a console error of this by default would make our life much more easier 👍. |
|
I had this problem and none of the above stuff applied to me (network logs showed that the user lookup was working). I fixed it by removing |
|
Ah I see, |
|
Ah actually it does work in SPA mode. If I set
https://nuxtjs.org/guide/routing#middleware Which explains the behavior I was getting with localstorage mode, where I'd be redirected to /login on refresh, but if I click any link, I'm suddenly logged in (since the middleware triggered). I'm new to Nuxt (and Vue) so I'm not sure what we're supposed to do with a middleware which needs to run on both the client and server side on initial load (since the server doesn't necesarily have access to the auth token). EDIT: Seems like this is by design and just how Nuxt middleware works nuxt/nuxt#2653 If you want to only use local storage and not cookies, you need to render in SPA mode. It's possible there's some sort of plugin version of this auth module that would work in universal mode without cookies but I'm still too new at this to really understand the difference. My app is going to use SPA mode anyway so it doesn't really matter to me. |
|
This was happening to me on every environment but only on new browser session. By default, cookies are deleted on session end. You have to set maxAge property of the cookie object to avoid cookie deleting after browser is closed. |
which... doesn't work for me in universal mode. the cookies are set anyways without what i've defined in code: and what do I get: for this project I'm working on, I treat it as a feature, as it has to do with sensitive stuff, so it is ok to authenticate on each request. but in dev mode, it's annoying to always authenticate myself after each page refresh. and for other projects, too. |
|
set the login property under redirect to false in nuxt.config.js |
|
I had the same problem with nuxt-auth and Laravel (Sanctum) Simple solution: # nuxt.config.js
user: {
url: '/api/v1/user',
method: 'get',
propertyName: 'data',
withCredentials: true,
data: {},
headers: {
'Referer': 'http://YOUR.FRONTEND.DOMAIN', // <- here
'Accept': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json'
}
}Or override the <?php
namespace App\Http\Middleware;
use Illuminate\Support\Str;
use Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful as BaseEnsureFrontendRequestsAreStatefulAlias;
class EnsureFrontendRequestsAreStateful extends BaseEnsureFrontendRequestsAreStatefulAlias
{
public static function fromFrontend($request)
{
if(parent::fromFrontend($request)) {
return true;
}
return Str::startsWith($request->headers->get('x-forwarded-host', ''), config('sanctum.stateful', []));
}
} |
|
Workaround: So I had base url set to '/api' and all secured pages were getting redirected through 302. Changed baseUrl to complete site url with https and it worked. |
|
finally i found that the problem was with auth middleware. Just change the built in nuxt auth middleware with your own as i did. then change nuxt auth redirect configuration in
|
@anwarramadha https://i.imgur.com/aqj264p.png On JS console, it is true, but on nuxt SSR, it is false. I guess, this is the reason why middleware:auth doesn't work. I tried your solution but it is still the same. Have you found alternative solution for this? |
|
It seems that no others working on this issue. I'm running into this issue. The middleware run on server so loggedIn will be false when refresh the protected page |
|
@anwarramadha For me it's nearly works. If I refresh the /dashboard page, yes it works but if I refresh while on another page I get : Error |
|
So did anyone found a solution? When calling my custom middleware (Not Working!) export default async function ({ $auth, redirect }) {
const user = await $auth.loggedIn
console.log(user)
if (user) {
// let the user see the page
} else {
// redirect to homepage
redirect('/')
}
} |
|
@fabiom91 Yes I found a solution but I am not sure exactly what makes it works. My nuxt.config.js: export default {
publicRuntimeConfig: {
axios: {
browserBaseURL: process.env.BROWSER_NAUTILUS_API
}
},
privateRuntimeConfig: {
axios: {
baseURL: process.env.NAUTILUS_API
}
},
/*
** Nuxt target
** See https://nuxtjs.org/api/configuration-target
*/
target: 'server',
pwa: {
icon: {
/* icon options */
fileName: 'nautilus.png'
}
},
/*
** Headers of the page
** See https://nuxtjs.org/api/configuration-head
*/
head: {
titleTemplate: '%s - ' + process.env.npm_package_name,
title: process.env.npm_package_name || '',
meta: [{
charset: 'utf-8'
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1'
},
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || ''
}
],
link: [{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico'
}]
},
/*
** Global CSS
*/
css: [],
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: [
{
src: '~/plugins/repository'
},
{
src: '~/plugins/native-websocket.js',
mode: 'client',
ssr: false
}
],
/*
** Auto import components
** See https://nuxtjs.org/api/configuration-components
*/
components: true,
/*
** Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module
'@nuxtjs/eslint-module',
'@nuxtjs/vuetify'
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/auth',
'@nuxtjs/pwa',
// Doc: https://github.com/nuxt/content
'@nuxt/content'
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
baseURL: 'http://localhost:8000',
credentials: true,
https: true
},
auth: {
redirect: {
logout: '/login'
},
strategies: {
local: {
endpoints: {
login: { url: '/auth/login', method: 'post', propertyName: 'access_token' },
logout: false,
user: { url: '/users/me', method: 'get', propertyName: false }
}
}
}
},
/*
** Content module configuration
** See https://content.nuxtjs.org/configuration
*/
content: {},
/*
** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module
*/
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
themes: {
light: {
primary: '#e38c59',
secondary: '#1789a9'
},
dark: {
primary: '#e38c59',
secondary: '#1789a9'
}
}
}
},
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {},
server: {
host: '0.0.0.0'
},
watchers: {
webpack: {
poll: 1000,
ignored: /node_modules/
}
},
router: {
middleware: ['auth']
}
}In my login.vue I am asking for auth: guest: My Caddyfile for reference: Please ask if you need more files to reproduce a working app on your side. |
|
Thank you @Atem18
modules: [
// other modules ...
'@nuxtjs/auth',
'cookie-universal-nuxt',
],
export default async function ({ app, redirect }) {
// the following look directly for the cookie created by nuxtjs/auth
// instead of using $auth.loggedIn
const user = await app.$cookies.get('auth._token.local')
if (user) {
// let the user see the page
} else {
// redirect to homepage
redirect('/')
}
}
<script>
export default {
middleware: ['auth-user'],
}
</script>
Also see here: https://stackoverflow.com/questions/64444811/nuxtjs-auth-module-not-working-in-the-middleware/64447805#64447805 |
|
@fabiom91 The solution is not complex at all, Caddy is a web server like Nginx but I suspect that Caddy stores cookies somewhere while Nginx does not. And a solution like yours should be implemented by default in the auth-module. |
|
Amazing thanks @fabiom91 - this is the only solution that managed to solve the issue for me |
the first option work with me override forntend method doesnt work |
|
Had the same issue, in my case the problem was in the server network settings. I have the API, URL with domain name https://api.com (for example). But the server was in the same local network, where the nuxt app was. And when I'd tried to make request as curl -X GET https://api.com - it throw me the error curl: (7) Failed to connect to https://api.com : Connection refused, but when I sent the same request from my local machine, or from another server - it was work well. And when requests were sent by SSR, it throw the same error, I think. So, in this moment authentification fails. After, we fixed the local network settings and all works as expected. May be it helps somebody. |
It works for me. |
To anyone ever faced UNABLE_TO_VERIFY_LEAF_SIGNATURE issue, instead of set up It works like a charm. For more information check this out Webpack Dev Server Proxy Docs |
|
There could be many reasons, but for me it's different. In my and I was using below command in production I changed it to Now everything works perfectly. When using |
|
I was hoping the An overview of my routes, and the desired redirect behavior is as follows: If the user IS NOT authenticated the following should occur: If the user IS authenticated the following should occur: My auth relevant My custom My My My My Lastly, do not forget to initialize the Vuex store by at least creating an empty My I hope this helps. 🙏🏻 |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
and others
Version
4
Reproduction link
http://todo.com
Steps to reproduce
Visit a protected route by clicking a
nuxt-link, and it loads correctly.Then refresh the page
What is expected ?
Protected page loads
What is actually happening?
Redirect to login
Additional comments?
Hi!
I'm a bit confused as to why this is happening. I'm using a pretty basic set up (local scheme, universal storage).
As soon as I refresh the page, I'm redirected (302 from nuxt) to the login page. I did a bit of debugging and this seems to be because
loggedInisn't set in the cookie state.All of the other cookies are there, but i'm still redirected :(
I'll do some more digging and try find some more info & a repro
The text was updated successfully, but these errors were encountered: