Personalized page using email codes
How do I make a custom page with my own UI using Nextjs but being able to use the method of sending code by email?
4 Replies
Hey, let me walk through this one :
First you need to go to your kinde account -> application -> scroll down to "Authentication experience" and toggle on "Use your own sign-up and sign-in screens"
Then go to Settings -> Authentication -> Click on "Configure" on "Email + Code" card and copy the Connection ID
After that it's pretty easy. You create your UI the way you want. For your case let's say we build a <LoginForm /> component with and input for the email and a submit button. On the form submit you'll have to manually triger the register / login and it's as simple as sending a request to your api. Usually i just do a router.push("...")
If you want to register the user it would be
For a login its:
You can refer to this code of mine too
What's beautiful about this is that for other auth options (social, etc) you just have to change the connection_id value
If you're using social sign-in you'd want to remove login_hint too
You can read more here: https://docs.kinde.com/authenticate/custom-configurations/custom-authentication-pages/#step-2-get-the-auth-method-connection-id
Kinde docs
Custom sign-up and sign-in pages
Our developer tools provide everything you need to get started with Kinde.
I forgot to read this
tysm
im going to use it