Ruby on Rails & React Passkey Example App

This is a sample implementation of a Ruby on Rails application with a React.js frontend that offers passkey authentication. For simple passkey-first authentication, the Corbado UI components are used.

Please read the full blog post to see all the required steps to integrate passkeys into a Ruby on Rails / React app.

File structure

...
├── app
|   ...
|   ├── controllers
|   |   └── pages_controller.rb    # Controller for our pages
|   |
├── config
|   ...
|   ├── environments                  
|   |   ├── development.rb         # Development environment config
|   |   └── production.rb          # Production environment config
|   |
|   └── routes.rb                  # The Ruby on Rails routes are configured here
|
└── frontend
    ...
    ├── .env
    └── src                  
        ...
        ├── index.js               # Root of our React.js app which also contains the React.js routes 
        └── routes                  
            ├── login.js           # Login page containing the Corbado auth component
            └── profile.js         # Profile page showing information about the current user

Prerequisites

Please follow the steps in Getting started to create and configure a project in the Corbado developer panel.

Open the development.rb and production.rb files under /config/environments and set the corbado_project_id variable to your Corbado project ID.

Usage

Build the React frontend by heading into the frontend folder with

cd frontend

and then run

npm i && npm run build

Then, you can run the project locally by executing the following command:

bin/rails s