https://github.com/ory/kratos-selfservice-ui-react-nextjs

A full reference implementation for designing your own login, registration, recovery, verification, ... pages using Ory Kratos' APIs.
https://github.com/ory/kratos-selfservice-ui-react-nextjs

authentication nextjs react

Last synced: 2 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ory/kratos-selfservice-ui-react-nextjs
• Owner: ory
• License: apache-2.0
• Created: 2021-08-30T13:58:14.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-02-22T12:37:22.000Z (10 months ago)
• Last Synced: 2024-10-29T14:55:40.426Z (about 2 months ago)
• Topics: authentication, nextjs, react
• Language: TypeScript
• Homepage: https://www.ory.sh/
• Size: 789 KB
• Stars: 133
• Watchers: 11
• Forks: 56
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://www.ory.sh/kratos/docs/quickstart).

To learn more about using this app, how it is built, and how to customize it

head over to the

[accompanying blog post](https://www.ory.sh/nextjs-authentication-spa-custom-flows-open-source)

which will be released soon!

The app itself you can see live at

**[kratos-reference-ui-react-nextjs.vercel.app](https://kratos-reference-ui-react-nextjs.vercel.app)**.




## Usage




**Environment**

This application can be configured with the following environment variables

_(refer to the

[NextJS documentation](https://nextjs.org/docs/basic-features/environment-variables)

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](https://www.ory.sh/kratos/docs/quickstart) 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:

```sh

npm run dev -- -p 4455

```