Code Monkey home page Code Monkey logo

ory-kit's Introduction

☄️ Ory Template

Warning

This project is work in progress. There is no guarantee that everything will work as it should and breaking changes in the future are possible.

The goal of this project is to create an easy-to-use setup to self-host Ory Kratos and Ory Hydra. It will contain an authentication UI, implementing all self-service flows for Ory Kratos and Ory Hydra, as well as an admin UI. All UI components are written in Svelte and Typescript, and styled using TailwindCSS.

Getting started

Start the backend services using Docker Compose:

cp /docker/ory-dev/.env.example /docker/ory-dev/.env
docker compose -f docker/ory-dev/docker-compose.yaml up -d
sh docker/ory-dev/hydra-setup.sh # creates an OAuth2 client (test the consent flow on http://localhost:5555)

Then start the authentication UI using npm:

cd authentication
cp .env.example .env
npm install
npm run dev

Deployment

Deploying the authentication Node on your server is relativly easy. Everything is prepared and the required steps to take are as few as possible. Just follow the steps below.

  1. Clone this repository to your development machine.
  2. Replace all occurences of "accounts.thielker.xyz" with your domain.
  3. Copy the .env.example file in /docker/ory-test/ to .env. Make sure the domains were changed in step 2.
  4. Configure the CORS rules in /docker/ory-test/ory/kratos/kratos.yaml and /docker/ory-test/ory/hydra/hydra.yaml.
  5. Configure the cookies in in /docker/ory-test/ory/kratos/kratos.yaml and /docker/ory-test/ory/hydra/hydra.yaml.
  6. Configure the WebAuthn ID in /docker/ory-test/ory/kratos/kratos.yaml. This has to be the top level domain, where the authentication UI will be hosted.

Thats everything you need to change in the configurations. Make sure that all changes are only inside docker/ory-test/. To actually deploy the project, you need to have Docker and Docker Compose installed on your server.

  1. Open the /authentication/deploy.sh script and change the variables at the top to your needs.
  2. Execute the script on your local development machine.

The script will build the docker image for the authentication UI, export it as a tar file, copy it with all required configurations and the docker-compose.yaml to your server and import it there. Then it will start the docker containers on your server.

Authentication UI

The authentication UI is already implemented and working. It supports all self-service flows for Ory Kratos and Ory Hydra. It is implemented in a way, that customizing style and page layout is very easy.

A browser window showing the sign up page of the authentication UI

A browser window showing the settings page of the authentication UI in dark mode

Next steps

The foundation is laid out, but there is still a lot of work to do. The next steps are:

  • Finish the authentication UI
  • Add OpenID Connect sample
  • Add Keto and Oathkeeper to the docker setup
  • Start working on the admin UI

If you want more specific information about the next steps, take a look at the issues.

Admin UI

soon.

ory-kit's People

Contributors

markusthielker avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

gqadonis

ory-kit's Issues

Add Hydra node to docker setup

Description

To provide OAuth2 and OIDC in the future, we require an Ory Hydra instance.
This tasks focuses on adding the required containers to the docker compose file and add an initial configuration.

Show current session dummy

Description

Since the currently used session is not part of the API response, the UI should show a dummy item for the current session. It should look the same as the other items, besides the "revoke" button being replaced with a "this session" text or something like that.

Improved text UI node

Description

At the moment the text node only shows two strings as text, which works but could be better.
With this issue, the text node should show specific UI depending on what text is shown.

Add logout page

Description

At the moment, the session is always closed by clicking a button in the application.
There should be a path '/flow/logout' which closes the session when called.
After logout the user should be redirected to the root path

Refactor ory client export to const

Description

At the moment, the frontend api created is exported in $lib/ory/index.ts as the default.
This is to be changed to an export const frontendApi and changed accordingly for all uses.

Fix WebAuthn configuration

Description

The current WebAuthn configuration for the deployment version throws an error. This has to be fixed.
Further more WebAuthn should be disabled in the development configuration since it is not available on localhost.

Verification page redirects if session exists

Description

The verification page redirects to the dashboard, if a valid session exists.
This makes validating the email address only possible if logged out, even if a verified email is not required to log in.

Replace current form submission with onSubmit function

Description

The Flow.svelte component currently creates a form like this:

<form action={ui.action} method={ui.method}>
    <FlowSet {nodes} />
</form>

Using the "built-in" form mechanisms works, but causes some problems.
Some endpoints of the Kratos API send different responses depending on the headers set for the request. See here
Setting headers is not supported in the HTML form tag.

This is the reason for redirects on every submission on the settings page and for stacking entries in the navigation history, as described in #37.

The official NextJS implementation solves this by passing an onSubmit function to the Flow component, which calls the Kratos FrontendApi via the SDK instead of using an HTML form.

The Flow.svelte component should be redesigned to work in the same way.
This will also make error handling (#15) easier to resolve.

Move messages to own component

Description

At the moment each Flow shows the flows messages. This leads to a ton of duplicate messages on the settings page when saving changes. This should be optional, the flow component will get a parameter if the messages should be shown inside the card.

Additionally the messages will become their own component to be used at places outside a Flow component.

Refactor messages in Flow component

Description

Currently the Flow component gets the flow object returned by the SDK and the list of messages to show, which is a property of the flow object. This should be refactored to a boolean prop if the messages should be shown or not. The list of messages should come from the flow object.

Add test deployment setup

Description

Since multiple files must be adjusted when deploying to a remote machine, a working test setup should be provided.

This setup should contain the following:

  • A customised docker compose file, equipped with labels for a Traefik proxy that's configured separately.
  • Customised configurations for Ory Kratos and Ory Hydra using a sample URL.
  • A configurable shell script that runs the docker deployment automatically.
  • Adjustments in the authentication UI to configure different values per .env file on the environments.

Add dark mode

Description

The authentication UI should support a dark mode with a toggle on the screen.

Add Hydra consent flow to authentication UI

Description

The login screen has already been modified to include the login challenge in requested login flow.
Now the consent screen showing the requested scopes and buttons for accepting or rejecting the access has to be implemented.

Update app dependencies

Description

The initial setup of the project was a while ago. All dependencies should be checked for updates.

OAuth consent flow not working

Description

After refactoring the submission system, the consent flow isn't working anymore.
The reason is a redirect to the homepage, if the user tries to access the /login page but a session already exists.
The redirect should only happen if no login_challenge query parameter was passed.

Remove navigation stacking in settings

Description

When a user saves changes on the settings page, the site doesn't just reload but navigates to the same site again.
This leads to a growing navigation stack of settings pages.

Improve mobile representation

Description

The mobile representation should be improved by using dynamic values for global padding, text sizes and other parameters.

Requesting another recovery code not possible

Description

Requesting another recovery code when resetting your password is not possible, since the form requires a code entered to be submitted. The solution is to move this button out of the form. It has to be analysed how to do this in the dynamic flow system without adding bugs to other forms.

Deactive "Revoke all" button when no sessions active

Description

The "Revoke all" button on the session management page is always active, even if there are no active sessions.
The button should be disabled, if there is no session to revoke.
Also there should be a text saying, that there are no other sessions.

Refactor flow component group parameter

Description

The flow component receives an array of strings for the group(s) to display, but fact is that it doesn't make sense to pass more than one group per component. The type of the parameter should be changed to type string to prevent misuse.

Move login messages out of flows

Description

With a previous issue, the messages on the settings page were moved from the flows to a separate component to avoid showing 100x the same message on the screen. This should be done on the login page as well but was forgotten. This is to be fixed in the scope of this issue.

Add user session management

Description

A user should have the possibility to see and manage all sessions associated to their account.
Therefor a subpage to the account settings will be created, listing all sessions with buttons to revoke them.

Translate strings inside ORY flows

Description

The i18n support so far only translates strings that are not supplied by the ORY api.
In the scope of this issue the translation will be extended to translate strings of all UiNodes.

Add a sample for social logins

Description

Social logins are not supported in the UI right now. This shall be changed in the scope of this issue.
Also, adding a sample provider with a mapper can help others to understand how to integrate new providers.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.