improwised / hydra-webui

Web Management UI for Hydra oAuth Server

Hydra Web UI

Web Management UI for Hydra oAuth Server

Demo Dashboard Link :

https://hydra-webui.improwised.dev/

Prerequisites

• Node.js - Version 12.14.1
• Docker compose

Compose setup

• Have a look at this url to run compose and create client,

https://www.ory.sh/hydra/docs/5min-tutorial/

.env.docker

• copy .env.docker to .env in web directory,

HYDRA_PROXY_URL=http://localhost:4445
PORT=3000

• To run with docker-compose,

docker-compose -f hydrastart.yaml \           
    -f hydrastart-postgres.yaml   \
    up --build

• To stop all the containers running with compose,

docker-compose -f hydrastart.yaml \           
    -f hydrastart-postgres.yaml   \
    stop

• To remove all the stopped container,

docker-compose -f hydrastart.yaml \           
    -f hydrastart-postgres.yaml   \
    rm

• If some containers are still running even after running above stop and rm commands, remove those containers individually by running below command,

docker stop <container-id>
docker rm <container-id>

UI Setup

• For UI everything is under /web/ folder, so go to /web/ folder.

.env.example

• copy .env.example to .env.

HYDRA_PROXY_URL=http://hydra:4445
PORT=3000

• HYDRA_PROXY_URL: It is Hydra Admin url.

• PORT: Port on which the UI will run.

Build Setup

• Go to /web/ folder.

• copy .env.example to .env. (skip if already done)

$ cp .env.example .env

• run following commands

# install dependencies (skip if already done)
$ npm install 

# build for production and launch server
$ npm run build

# run the application
$ npm start

# serve with hot reload at localhost:3000
$ npm run dev

After this application will run at http://localhost:3000/.

Perform the OAuth 2.0 authorization code grant

• Go to root folder and run following commands.

• Run this command to run authorization flow using consent app.

• Here callback url should be same as the callback url configured in the application using hydra.

# Create client
$ docker-compose -f quickstart.yml exec hydra \
    hydra clients create \
    --endpoint http://127.0.0.1:4445 \
    --id auth-code-client \
    --secret secret \
    --grant-types authorization_code,refresh_token \
    --response-types code,id_token \
    --scope openid,offline \
    --callbacks http://127.0.0.1:5555/callback

# Perform authorization code flow
$ docker-compose -f quickstart.yml exec hydra \
    hydra token user \
    --client-id auth-code-client \
    --client-secret secret \
    --endpoint http://127.0.0.1:4444/ \
    --port 5555 \
    --scope openid,offline

Gitea Setup

• To use hydra client in gitea install gitea from binary to your local system from here https://docs.gitea.io/en-us/install-from-binary/

• In the configuration page of the gitea when you sign-in for the first time use SQLite as DB, 127.0.0.1 instead of localhost.

• Run this command to run authorization flow using getia in the root folder.

# Create client
$ docker-compose -f hydrastart.yaml exec hydra \
    hydra clients create \
    --endpoint http://127.0.0.1:4445 \
    --id gitea-client \
    --secret secret \
    --grant-types authorization_code,refresh_token \
    --response-types code,id_token \
    --scope openid,offline \
    --callbacks http://127.0.0.1:3000/user/ORY_Hydra/new/callback \
    --token-endpoint-auth-method client_secret_post

• Once the client is created and Logged-in to gitea, go to authentication sources tab, add authentication source with following details.

Authentication Type: OAuth2
Authentication Name: ORY_Hydra
OAuth2 Provider: OpenID Connect
Client ID: gitea-client
Client Secret: secret
OpenID Connect Auto Discovery URL: http://127.0.0.1:4444/.well-known/openid-configuration

• Log-out of the gitea and you should see sign-in with OpenID connect.

hydra-webui's Issues

Deploy hydra-webui using docker

Deploy in Node Version 12.14.1
Fix Redirection issue

Update .prettierrc

{
  "semi": true,
  "arrowParens": "always",
  "singleQuote": false
}

after that run npm run lint which updates all files.

Create CI for Hydra WebUI

• Make a Workflows
• Add Credentials to GitHub Actions

oAuth Client Management

• List, Create, Update and Delete oAuth Clients using Hydra API described here.
• Make Hydra server URL configurable from environment variable
• Proxy all requests through server to avoid CORS. See this.

Add e2e tests

• Write e2e tests to test the application against all supported hydra versions

Set token-endpoint-auth-method

Hi there,

First I'd like to congratulate for the project. It's still very young but can help lots of people to get started with OryHydra more easily

Secondly It would be nice to be able to set "token-endpoint-auth-method". Current version doesn't support it and register clients with default value "client_secret_basic"

Thanks and good coding

Demo needed

Please add the web demo!

Dockerize and setup CI pipelines

• Dockerize the application
• Create a CI pipeline that does the following:
  • Run tests across matrix of all supported versions of hydra
  • Builds container image, tags it, and pushes it to registry if all tests pass
• Create a docker-compose.yml that sets up the application along with postgres and hydra server.

Create Client in Hydra-webui

• Run hydra-webui
• Goto http://127.0.0.1:3000
• Create Client should work