If you want to see the finished code, please have a look at our sample application repository.
The result looks as follows:
This repository contains only two HTML files: The login page as well as the profile page which is only accessible once you are logged in.
Visit the Corbado developer panel to sign up and create your account (you’ll see passkey sign-up in action here!).
In the appearing project wizard, select “Web app” as type of app and afterward select “No existing users” as we’re building a new app from scratch. Moreover, providing some details regarding your frontend and backend tech stack as well as the main goal you want to achieve with Corbado helps us to customize and smooth your developer experience.
Next, we navigate to Settings > General > URLs and set the Application URL, Redirect URL and Relying Party ID to the following values (We will use a simple http server to host our HTML files on port 8080):
- ApplicationURL: Provide the URL where you embedded the web component, http://localhost:8080
- RedirectURL: Provide the URL your app should redirect to after successfulauthentication and which gets sent a short-term session cookie, here: http://localhost:8080/profile
- RelyingParty ID: Provide the domain (no protocol, no port and no path) where passkeysshould be bound to, here: localhost
Create a folder for your project and place an index.html file in it. Inside that file, paste the following HTML frame. This includes a script from Corbado which we need in the next steps. Don’t forget to paste your Corbado project ID.
We add the corbado-auth-provider HTML element to our login.html file to make displaying content depending on the login status of the user easier. Your login.html file should look like this afterwards:
Inside the corbado-auth-provider element we can place “authed” and “unauthed” divs as seen above. The content of the “authed”-slot is then displayed if the user is authenticated while the content of the “unauthed”-slot is shown if no one is logged in.
In the “unauthed”-slot we now place the Corbado webcomponent (<corbado-auth/>) which will handle all means (e.g. fallbacks, user detection, passkey management) of authentication:
After successful authentication, the Corbado web component redirects the user to the provided Redirect URL (https://localhost:8080/profile). This page gives information about the login status and provides a button to log out. Create a profile.html file and add the following code. Like our login page, it uses the corbado-auth-provider HTML element to show different content dependent on the authentication status of the user.
The corbado-auth-provider HTML element uses Corbado’s session management internally, so we don’t have to worry about sessions, cookies or tokens.
To start our application, we need a simple webserver which runs locally on our machine. We chose http-server for this task. Install it with
Afterwards enter the folder which contains the HTML files and start the webserver by typing
When visiting http://localhost:8080 you should see the following screen:
After successful sign up / login, you see the profile page:
Enjoyed this read?
Stay up to date with the latest news, strategies and insights about passkeys sent straight to your inbox!