davide-gheri / kratos-hydra-selfservice-ui

Ory.sh Kratos and Hydra integration example

Selfservice UI using Next.js

Start

Setup environment variables

cp .env.example .env

Edit .env as preferred, available env variables:

• SECRET: Kratos and Hydra cookie secret
• PAIRWISE_SALT: Hydra pairwise salt
• OIDC_ENABLED: enable/disable Kratos oidc method
• GITHUB_CLIENT_ID: Github Kratos oidc, client id
• GITHUB_CLIENT_SECRET: Github Kratos oidc, client secret
• GITLAB_CLIENT_ID: Gitlab Kratos oidc, client id
• GITLAB_CLIENT_SECRET: Gitlab Kratos oidc, client secret

Start Kratos, Hydra, Mysql, PhpMyAdmin and Mailslurper

$ ./start.sh

Install UI dependencies

$ yarn install

Start Selfservice UI

$ cd applications/nextjs && yarn build && yarn start

Or start with the development server

$ cd applications/nextjs && yarn dev

Navigate to http://127.0.0.1:4455 to view the Kratos Selfservice UI

Test Hydra integration

Generate a client

 docker-compose exec hydra \
 hydra clients create \
     --endpoint http://127.0.0.1:4445 \
     --id next-client \
     --secret secret \
     --grant-types authorization_code,refresh_token \
     --response-types code,id_token \
     --scope openid,offline \
     --callbacks http://127.0.0.1:5550/callback

Start the client application

$ cd applications/client-app && yarn start

Navigate to http://localhost:5550 to view the Client application and perform the OAuth2 authorization flow with Hydra and Kratos as identity management system