Kinde•3mo ago

Remix app how to redirect to previous page post login

in my remix js app I have http://localhost:9001/app behind auth. So when users lands at http://localhost:9001/app/xyz it successfully goes to login page if users is not authenticated, but after login user is being redirected to homepage http://localhost:9001/ I would like to change that. Please guide me.🐮 My loader at the moment withing /app.tsx

// app.tsx
export const loader = async ({request}: LoaderFunctionArgs) => {
  const {getUser} = await getKindeSession(request);
  const user = await getUser();

  if (user === null) {
    throw redirect("/kinde-auth/login?returnTo=/");
  }

  return json({user});
};

// app.tsx
export const loader = async ({request}: LoaderFunctionArgs) => {
  const {getUser} = await getKindeSession(request);
  const user = await getUser();

  if (user === null) {
    throw redirect("/kinde-auth/login?returnTo=/");
  }

  return json({user});
};

if any pages loads at /app/new it is automatically behind auth.

KINDE_SITE_URL=http://localhost:9001
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:9001/logout
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:9001/app

KINDE_SITE_URL=http://localhost:9001
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:9001/logout
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:9001/app

4 Replies

Oli - Kinde•3mo ago

Hey @Ajinkya, Thanks for reaching out.

in my remix js app I have http://localhost:9001/app behind auth. So when users lands at http://localhost:9001/app/xyz it successfully goes to login page if users is not authenticated, but after login user is being redirected to homepage http://localhost:9001/ I would like to change that. Please guide me.🐮

In this case, would you want the user to be redirected to http://localhost:9001/app/xyz after they're authenticated?

Ajinkya•3mo ago

Yes . At the moment if I login the page redirects back to localhost. Even if it redirects to /app that's is also great.

Daniel_Kinde•3mo ago

Hi, this doesn't sound right, if you could you please raise a bug on the repo, ideally with a minimal repoduction example we will get this checked into.

Ajinkya•3mo ago

I have kinde auth file as given in kinde docs wrt to Remix SDK. app/routes/kinde-auth.$index.tsx And in app/routes/ap.tsx I have the following code:

export const loader = async ({request}: LoaderFunctionArgs) => {
  const user = await await requireLoggedInUser(request)
...

 #utils.server.ts
import {getKindeSession} from "@kinde-oss/kinde-remix-sdk";
import {redirect} from "@remix-run/node";

export const requireLoggedInUser = async (request: Request): Promise<import("@kinde-oss/kinde-typescript-sdk").UserType> => {
  const {getUser} = await getKindeSession(request);
  const user = await getUser();
  if (user === null) {
    throw redirect("/kinde-auth/login?returnTo=/");
  }

  return user
}

export const loader = async ({request}: LoaderFunctionArgs) => {
  const user = await await requireLoggedInUser(request)
...

 #utils.server.ts
import {getKindeSession} from "@kinde-oss/kinde-remix-sdk";
import {redirect} from "@remix-run/node";

export const requireLoggedInUser = async (request: Request): Promise<import("@kinde-oss/kinde-typescript-sdk").UserType> => {
  const {getUser} = await getKindeSession(request);
  const user = await getUser();
  if (user === null) {
    throw redirect("/kinde-auth/login?returnTo=/");
  }

  return user
}

Also I have exact same env file which was shared in Kinde auth setup page for the remix engine. Raise bug as in on kinde auth GitHub repo ? Please let me know do you need anything apart from this. As my repo is private

Gaming

Programming

Remix app how to redirect to previous page post login