Skip to content

mpgxvii/hydra-webui

 
 

Repository files navigation

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.

About

Web Management UI for Hydra oAuth Server

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 54.8%
  • JavaScript 38.8%
  • Dockerfile 6.4%