Welcome to the Kinde community.

A
A
A
M
T

When to use email code connection id in nextjs app router

I have a Next.js App Router application. When should I use the Email+Code connection id?

K
M
3 comments

In a Next.js App Router application, you should use the Email+Code connection ID when you want to implement an email-based authentication method where users receive a code via email to sign in. This is particularly useful for applications that prefer not to use traditional password-based authentication and instead rely on a more secure and user-friendly method. To set this up, follow these steps: 1. *Switch on the custom auth option for your application:* • Go to Settings > Applications. • Select View details on the application you want to switch on custom auth for. • Scroll down and switch on the "Use your own sign-up and sign-in screens" option in the Authentication experience section. • Select Save. 2. *Get the auth method connection ID:* • Go to Settings > Authentication. • Select Configure on the relevant authentication method tile (e.g., Email+Code). • Copy the Connection ID and paste it somewhere you can access later. • Select Save or Cancel. • Repeat for each authentication method you want to be included on your custom sign-in screen. 3. *Add the Connection ID to your design code:* • Update your code to include the `connection_id` in the auth URL. Here is an example using React: ``` <button onClick={() => login({ authUrlParams: { connection_id: "your_email_code_connection_id" } }) } > Sign in with Email </button> ``` You can now test if it works by signing in to your project or app. For more detailed information, you can refer to the .

If I don’t use custom login/signup pages, do I still need to use the Email+Code connection id somewhere, or I can ignore it?

If you are not using custom login/signup pages, you do not need to use the Email+Code connection ID. The connection ID is primarily used when you want to bypass Kinde's default authentication screens and implement your own custom sign-up and sign-in pages. If you are using Kinde's default authentication screens, the connection ID is managed internally by Kinde, and you do not need to handle it in your application code.

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