Kinde•2y 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

http://localhost:9001/app/xyz

http://localhost:9001/app/xyz

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/

http://localhost:9001/

http://localhost:9001/

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});
};

// 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

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

Oli - Kinde•7/7/24, 12:10 AM

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
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/
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

http://localhost:9001/app/xyz

after they're authenticated?

OOli - Kinde Hey @Ajinkya, Thanks for reaching out. > in my remix js app I have http://local...

AjinkyaOP•7/8/24, 8:09 AM

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 Rivers - Kinde•7/8/24, 12:38 PM

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.

AjinkyaOP•7/8/24, 3:41 PM

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
}

DDaniel Rivers - Kinde Hi, this doesn't sound right, if you could you please raise a bug on the repo, i...

AjinkyaOP•7/8/24, 3:42 PM

Also I have exact same env file which was shared in Kinde auth setup page for the remix engine.

DDaniel Rivers - Kinde Hi, this doesn't sound right, if you could you please raise a bug on the repo, i...

AjinkyaOP•7/8/24, 3:44 PM

Raise bug as in on kinde auth GitHub repo ?
Please let me know do you need anything apart from this.

AjinkyaOP•7/8/24, 3:44 PM

As my repo is private

Remix app how to redirect to previous page post login

Similar Threads

Similar Threads

Similar Threads