Ory Kratos ReactJS / NextJS User Interface Reference Implementation

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.

Usage

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