Kinde•4mo ago

Sometimes when a user is logged out, it's redirected to kinde page

Hey, I have setup all the redirect URLs to my app, but sometimes when I open app after some time, I'm redirected to the kinde auth page, this one that says that you were supposed to don't find it etc. Is there any settings to redirect somewhere else than this page, I think I checked all of them and couldn't find such. Or maybe some setting to add a button like "Go to app" etc.

6 Replies

onderay•4mo ago

It sounds like you might be encountering an issue where the session has expired, or the user is not authenticated, leading to a redirect to the Kinde authentication page. Configure Token and Session Expiry: Go to Settings > Environment > Applications. Select View details on the application tile. Select Tokens in the side menu. For each token type (ID tokens, access tokens, and refresh tokens), set the expiry time in seconds. For example, 3,600 seconds is one hour; 86,400 seconds is one day. Select Save. Handle Session Expiry in Your Application: Ensure your application checks the validity of the session on each request. If the session is expired, redirect the user to the sign-in page. Here is an example of how you might handle this in an Express.js application:

const express = require("express");
const { setupKinde, protectRoute, getUser, GrantType } = require("@Kinde-oss/kinde-node-express");

const app = express();

const config = {
  clientId: "<YOUR_CLIENT_ID>",
  issuerBaseUrl: "https://<YOUR_SUBDOMAIN>.kinde.com",
  siteUrl: "http://localhost:3000",
  secret: "<YOUR_CLIENT_SECRET>",
  redirectUrl: "http://localhost:3000",
  scope: "openid profile email",
  grantType: GrantType.AUTHORIZATION_CODE,
  unAuthorisedUrl: "http://localhost:3000/unauthorised",
  postLogoutRedirectUrl: "http://localhost:3000"
};

setupKinde(config, app);

app.use((req, res, next) => {
  if (!req.isAuthenticated()) {
    return res.redirect('/login');
  }
  next();
});

app.get("/login", async (req, res) => {
  const loginUrl = await kindeClient.login(sessionManager);
  return res.redirect(loginUrl.toString());
});

app.listen(3000, () => {
  console.log("Server is running on http://localhost:3000");
});

const express = require("express");
const { setupKinde, protectRoute, getUser, GrantType } = require("@Kinde-oss/kinde-node-express");

const app = express();

const config = {
  clientId: "<YOUR_CLIENT_ID>",
  issuerBaseUrl: "https://<YOUR_SUBDOMAIN>.kinde.com",
  siteUrl: "http://localhost:3000",
  secret: "<YOUR_CLIENT_SECRET>",
  redirectUrl: "http://localhost:3000",
  scope: "openid profile email",
  grantType: GrantType.AUTHORIZATION_CODE,
  unAuthorisedUrl: "http://localhost:3000/unauthorised",
  postLogoutRedirectUrl: "http://localhost:3000"
};

setupKinde(config, app);

app.use((req, res, next) => {
  if (!req.isAuthenticated()) {
    return res.redirect('/login');
  }
  next();
});

app.get("/login", async (req, res) => {
  const loginUrl = await kindeClient.login(sessionManager);
  return res.redirect(loginUrl.toString());
});

app.listen(3000, () => {
  console.log("Server is running on http://localhost:3000");
});

In this example, the middleware checks if the user is authenticated. If not, it redirects them to the login page. Let me know what Kinde SDK you are using and I can spin up a code snippet for you

50BytesOfJohn•4mo ago

Hey, thanks for reply. I'm using the nextjs sdk, with withAuth middleware

onderay•4mo ago

Hopefully this will guide you further Middleware Configuration When using the withAuth middleware, you can customize the redirection behavior. Here's how you can modify it:

import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";

export default withAuth(
  async function middleware(req) {
    console.log("look at me", req.kindeAuth);
  },
  {
    isReturnToCurrentPage: true,
    loginPage: "/login",
    isAuthorized: ({token}) => {
      // The user will be considered authorized if they have the permission 'eat:chips'
      return token.permissions.includes("eat:chips");
    }
  }
);

export const config = {
  matcher: ["/admin"]
};

import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";

export default withAuth(
  async function middleware(req) {
    console.log("look at me", req.kindeAuth);
  },
  {
    isReturnToCurrentPage: true,
    loginPage: "/login",
    isAuthorized: ({token}) => {
      // The user will be considered authorized if they have the permission 'eat:chips'
      return token.permissions.includes("eat:chips");
    }
  }
);

export const config = {
  matcher: ["/admin"]
};

In this configuration, you can set the loginPage option to specify where users should be redirected when they're not authenticated. Environment Variables You can also set environment variables to control the redirection behavior. In your .env.local file, you can set: KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard This will redirect users to the specified URL after they log in. Dynamic Redirection For more dynamic control over redirection, you can use the postLoginRedirectURL parameter with the LoginLink component:

import { LoginLink } from "@kinde-oss/kinde-auth-nextjs/components";

<LoginLink postLoginRedirectURL="/dashboard">Sign in</LoginLink>

import { LoginLink } from "@kinde-oss/kinde-auth-nextjs/components";

<LoginLink postLoginRedirectURL="/dashboard">Sign in</LoginLink>

This will append post_login_redirect_url to the search params when redirecting to Kinde Auth. State Parameter If you need even more control, you can use the state parameter to store the intended destination of your user:
1. Generate a random string (e.g., "BlueFox0101"). 2. Store this string as a key for an object with the value of your application state:

{
  "BlueFox0101" : {
    nextUrl: '/some-protected-route',
  }
}

{
  "BlueFox0101" : {
    nextUrl: '/some-protected-route',
  }
}

3. Include this string as the state param when redirecting to Kinde. 4. After authentication, retrieve the state and use it to redirect the user.

50BytesOfJohn•4mo ago

So for my app, I have all routes protected with middleware. I have defined site URL, post login, post logout URLs in env, all set for my app homepage. I know it may be hard to help me here, as I'm not able to fully reproduce it. I mean, sometimes when I open the app after some time on tablet (so I believe session expires), I see this kinde page. But sometimes, especially on PC, it's just showing the login page normally. I just thought that maybe you are aware of such thing already. Would it be possible to add a setting or something, that would show something like "Back to app" or "Back to website" button on that page. Even just in case someone is lost and see this page? Since it's a different domain it may be confusing, and I believe such a button could be helpful, with customized link or just link to app homepage that's already in settings I think.

onderay•4mo ago

Thanks for the extra details. I will get the team to look into it. What version of the Kinde NextJS SDK are you using?

Peteswah•4mo ago

Hey @50BytesOfJohn are you using the isReturnToCurrentPage middleware option? There was a similar issue with PWAs and going to interesting pages. We can definitely add a button "Back to app" for you though

Gaming

Programming

Sometimes when a user is logged out, it's redirected to kinde page