This repository contains a reference implementation for Ory Kratos' in ReactJS / NextJS. It implements all Ory Kratos flows (login, registration, account settings, account recovery, account verification).
If you only want to add authentication to your app, and not customize the login, registration, account recovery, ... screens, please check out the Ory Kratos Quickstart.
To learn more about using this app, how it is built, and how to customize it head over to the accompanying blog post which will be released soon!
The app itself you can see live at kratos-reference-ui-react-nextjs.vercel.app.
Environment
This application can be configured with the following environment variables (refer to the NextJS documentation to learn how to configure the application):
ORY_SDK_URL
(required)
The URL where ORY Kratos's Public API is located. If this app and ORY Kratos are running in the same private network, this should be the private network address (e.g.kratos-public.svc.cluster.local
).
Example .env.local
:
ORY_SDK_URL=http://localhost:4433/
Running Locally
The quickstart documentation guides
developers to use port 4455
for the self-service UI. By default, NextJS uses
port 3000
. Use the -p
or --port
option of the next dev
/ next start
commands to set the port number:
npm run dev -- -p 4455