Welcome to the Kinde community.

A
A
A
M
T

Redirecting Users to Register Page After Kinde User Creation

How could I redirect users to my /register page after a Kinde user is created?
I have KINDE_POST_LOGIN_REDIRECT_URL="http://localhost:3000" defined, and I want to preserve the behaviour that after a login the user is redirected to /.
I just want to make sure that after a sign up, the user is redirected to http://localhost:3000/register ?

K
M
3 comments

To achieve the desired behavior where users are redirected to `/register` after signing up and to `/` after logging in, you can handle the redirection logic based on the context of the authentication event. Here’s a general approach you can follow: 1. *Differentiate Between Login and Sign Up:* • You can use query parameters or state parameters to differentiate between login and sign-up actions. 2. *Modify the Redirect URL Based on the Action:* • In your callback handling logic, check the context (login or sign-up) and set the redirect URL accordingly. Here’s an example of how you might implement this in an ExpressJS application: ``` const express = require('express'); const app = express(); app.get('/callback', async (req, res) => { const url = new URL(`${req.protocol}://${req.get("host")}${req.url}`); await kindeClient.handleRedirectToApp(sessionManager, url); // Check if the user just signed up const isSignUp = url.searchParams.get('state') === 'signup'; // Redirect based on the action if (isSignUp) { return res.redirect('/register'); } else { return res.redirect('/'); } }); // Example login and register routes app.get('/login', async (req, res) => { const loginUrl = await kindeClient.login(sessionManager); return res.redirect(loginUrl.toString()); }); app.get('/register', async (req, res) => { const registerUrl = await kindeClient.register(sessionManager, { state: 'signup' }); return res.redirect(registerUrl.toString()); }); app.listen(3000, () => { console.log('Server is running on ); }); ``` In this example: • The `state` parameter is used to differentiate between login and sign-up actions. • When the user registers, the `state` parameter is set to `signup`. • In the callback route, the `state` parameter is checked to determine the appropriate redirect URL. This way, you can ensure that users are redirected to `/register` after signing up and to `/` after logging in.

I’m using the Nextjs sdk, and rendering the LoginLink and RegisterLink components from @kinde-oss/kinde-auth-nextjs/components

To achieve the desired behavior of redirecting users to `/register` after signing up and to `/` after logging in, you can use the `postLoginRedirectURL` parameter with the `RegisterLink` and `LoginLink` components from the `@kinde-oss/kinde-auth-nextjs/components` package. Here is how you can set it up: 1. *Set the `KINDE_POST_LOGIN_REDIRECT_URL` environment variable* in your `.env.local` file to handle the default login redirection: ``` KINDE_POST_LOGIN_REDIRECT_URL= ``` 2. *Use the `postLoginRedirectURL` parameter* in your `RegisterLink` component to specify the redirection URL after sign-up: ``` import { RegisterLink, LoginLink } from "@kinde-oss/kinde-auth-nextjs/components"; const AuthLinks = () => ( <div> <LoginLink postLoginRedirectURL="/">Sign in</LoginLink> <RegisterLink postLoginRedirectURL="/register">Sign up</RegisterLink> </div> ); export default AuthLinks; ``` By setting the `postLoginRedirectURL` parameter in the `RegisterLink` component, you ensure that users are redirected to `/register` after signing up. The `LoginLink` component will use the default redirection URL specified in the `KINDE_POST_LOGIN_REDIRECT_URL` environment variable, which is set to `/`.

Add a reply
Sign up and join the conversation on Slack
Join