Kinde•2w ago

Nuxt + Kinde Module Logic Problems

Hello, We are using the Kinde Nuxt module for an application on Nuxt, and we are facing some issues. Let me first explain what we are trying to achieve. Goal: All application routes should be protected, and the user should be logged out and redirected to the login page based on token expiration. Problem: After the token expires, the user is redirected to the login page, but without filling in any inputs, the user is automatically logged in again and returned to the relevant page. What should happen instead is that when the token expires or a 401 is returned, the user should be redirected to the login page and required to fill in the relevant fields. Action Taken: I wanted to write a global middleware to check whether the user is logged in whenever a page is refreshed or when route changes occur, as it didn’t make sense to use definePageMeta inside every single page. Problem Encountered with the Action Taken: When a force refresh occurs, the Kinde Nuxt module only runs once on the SSR side and doesn’t work for every route change. To address this, we used the useAuth hook, but even then, it showed us as still logged in even after the token had expired, so we couldn’t use it. The useKindeClient works on the SSR side but returns null on the client side. The useAuth wasn’t functioning correctly either. Code for my middleware:

export default defineNuxtRouteMiddleware(async () => {
    const client = useKindeClient();
    if (client) {
        const isAuth = await client.isAuthenticated();
        if (isAuth) {
            const token = await client.getToken();
            if (process.env.NODE_ENV === 'development') {
                console.log('token', token)
                console.log('refreshTokens', await client.refreshTokens());
            }
            useState('token', () => token);
            return true;
        }else{
            useState('token', () => null);
            return navigateTo('/api/login', {external:true});
        }
    }
})

export default defineNuxtRouteMiddleware(async () => {
    const client = useKindeClient();
    if (client) {
        const isAuth = await client.isAuthenticated();
        if (isAuth) {
            const token = await client.getToken();
            if (process.env.NODE_ENV === 'development') {
                console.log('token', token)
                console.log('refreshTokens', await client.refreshTokens());
            }
            useState('token', () => token);
            return true;
        }else{
            useState('token', () => null);
            return navigateTo('/api/login', {external:true});
        }
    }
})

10 Replies

Ages•7d ago

Hi @Mert Efe Cerit Thanks for providing the detailed explanation of the issue you're facing. I'd like to clarify the main issue you're encountering: - When the token expires, the user is redirected to the login page but is automatically logged in again without filling in any inputs. - Instead, you want the user to be redirected to the login page and required to fill in the relevant fields when the token expires. Could you also please confirm: - The version of the Kinde Nuxt module you're using? - Are there any specific configurations or customizations you've made to the Kinde module or Nuxt app? - Are you using any particular authentication flow (e.g., OAuth, OpenID Connect) in the app? This information will help us in debugging the issue more effectively. Let me know, and we'll take it from there

Mert Efe CeritOP•7d ago

Hi, @Ages Yes, details are follows - "@nuxtjs/kinde": "^0.1.11" - i don't think so, we only use global middleware - i don't think so

TotalScrub•7d ago

@Mert Efe Cerit could it be your token configuration? I'm not sure how to 'turn off' refresh tokens. But I suspect what is happening is that the user still has a refresh token so Kinde is implicitly refreshing the access token. Maybe try setting the refresh token expiry to 0 or -1 and see what Kinde does?

TotalScrub•7d ago

You can configure tokens inside the 'Application' that users use to authenticate with in the Tokens section. https://docs.kinde.com/build/tokens/configure-tokens/

Kinde docs

Configure token and session expiry

Our developer tools provide everything you need to get started with Kinde.

Mert Efe CeritOP•7d ago

Cannot be set below 60 seconds @TotalScrub

Mert Efe CeritOP•7d ago

When I look at the audit logs, I see the phrase "pre-authenticated". Then there is the "granted an access token to" record. If the refresh token has expired, I need to enter login information on the login page. But as soon as I go to the page, I automatically log in and it takes me to the relevant page of the application.

TotalScrub•7d ago

Not sure sorry, it was just a stab in the dark. It's not a behaviour I currently need for my app (I'm happy to use refresh tokens). But I'll keep an eye on this thread as it's a problem I may face in the future. I'm not sure what the Kinde log messages refer to, might need Kinde to respond on that count. It might be a 'bug' or deliberate behaviour where the refresh token (and auth token) have expired, but Kinde's session (the one associated with the Kinde domain, not your web application) is still active and valid, thus issues another auth token without requiring sign in. I.e. from a JWT perspective it's working as expected. However, Kinde's login flow on the UI isn't tied to the token configuration. I don't see a way in Kinde to turn off persistent sessions (E.g. in many auth experiences there is a checkbox to say if you want to stay signed in or not,) as this looks to be the default behaviour.

Zaki•3d ago

Hi @Mert Efe Cerit, As Stephen suggested, the issue might be due to an active and valid Kinde session. Could you please try checking this behavior on a different browser and let us know if the issue persists? Thanks!

Mert Efe CeritOP•3d ago

@Zaki I tried it on the Safari browser, and there was no issue. After the token expiration and the forced refresh, I was redirected to the login page as expected. However, this does not happen on the Chrome browser. If there is nothing we can do on our end, what would be the ETA to resolve this issue? We are planning to launch the application today. thanks

Zaki•2d ago

Thanks for the update, @Mert Efe Cerit. Just to confirm, can you try logging out from Kinde, clearing the cache on Chrome, and testing again? Let us know if the issue persists.

Gaming

Programming

Nuxt + Kinde Module Logic Problems

Did you find this page helpful?