Skip to content

A full reference implementation for designing your own login, registration, recovery, verification, ... pages using Ory Kratos' APIs.

License

Notifications You must be signed in to change notification settings

ory/kratos-selfservice-ui-react-nextjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

2df1892 · Jan 2, 2025
Jan 2, 2025
Jan 2, 2025
Jan 10, 2024
Jan 2, 2025
Mar 7, 2023
Jun 20, 2023
Oct 15, 2021
Jan 12, 2024
Feb 22, 2024
Oct 15, 2021
Sep 12, 2022
Oct 15, 2021
Oct 15, 2021
Jan 10, 2024
Oct 15, 2021
Oct 15, 2021
Sep 12, 2022
Dec 31, 2024
Dec 31, 2024
Dec 31, 2024
May 3, 2022
Mar 7, 2023
May 13, 2022
Dec 31, 2024
Nov 5, 2021
Jan 10, 2024
Sep 12, 2022
Mar 7, 2023
Mar 22, 2023
Mar 22, 2023
Sep 12, 2022
Mar 7, 2023
Oct 15, 2021

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

About

A full reference implementation for designing your own login, registration, recovery, verification, ... pages using Ory Kratos' APIs.

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks