This is a sample implementation of a Keycloak based app with existing users where the Corbado's passkey-first web component is integrated. Keycloak can be kept as existing auth solution, while Corbado handles the passkey authentication part. Existing password-based users from Keycloak are integrated using Corbado webhooks while new users are stored passwordless.
Read the full tutorial in our blog post here.
Note: In this tutorial, an existing app is created with some pre-existing, password-based users. Have a look at our docs to see the integration if you don't have any users yet.
├── app.js
├── .env
├── src
| ├── controllers
| | ├── authController.js # renders views and uses Corbado SDK for session management
| | └── corbadoWebhookController.js # Takes all requests belonging to the Corbado webhook logic
| |
| ├── routes
| | ├── authRoutes.js # All routes belonging to certain views
| | └── corbadoWebhookRoutes.js # All routes belonging to the Corbado webhook
| |
| ├── services
| | └── userService.js # Communicates with Keycloak
| |
| └── views/pages
| ├── login.ejs # Login page with the web component
| └── profile.ejs # Profile page showing user info
Please follow steps 1-3 on our Getting started page to create and configure a project in the Corbado developer panel.
Next, follow steps 4-6 on our Web component guide and set the Application URL to http://localhost:3000/login, the Redirect URL to http://localhost:3000/profile and the Relying Party ID to localhost.
In the integration mode settings, make sure you have selected Web component as integration mode and selected Yes as existing user base.
Lastly, configure the webhooks as seen in the image:
Use the values you obtained above to configure the following variables inside .env:
The CLI secret is located here.
- PROJECT_ID=""
- API_SECRET=""
- CLI_SECRET=""
Note: Before continuing, please ensure you have Docker installed and accessible from your shell.
Use the following command to start the system:
docker compose up
Note: Please wait until all containers are ready. This can take some time.
After step 2.2. your local server should be fully working.
If you now visit http://localhost:3000, you should be forwarded to the /login page.
When authenticated you will be forwarded to the /profile page.
You can find the Keycloak Dashboard at http://localhost:8080/admin/master/console/ with username and password both being admin. Feel free to navigate to the Users-page and adding some password-based users. If you go back to http://localhost:3000, you'll be able to login with those users as well as explore the possibilities of passkeys with optimized UI experience.