How To Integrate Passkeys in PHP Laravel Apps

vdelitz

vdelitz

Posted on November 20, 2023

How To Integrate Passkeys in PHP Laravel Apps

1. Introduction

2. PHP Laravel Passkey Project Prerequisites

3. Repository Structure for PHP Laravel Passkey Project

4. Set Up Your Corbado Account and Project

5. Set Up PHP Laravel App

6. Create PHP Laravel Passkey Login Page

6.1. Embed Passkey Authentication Web Component

6.2. Add Route for Passkey Login Page

7. Create Profile Page

8. Get Data From Corbado Session

9. Start Using Passkeys in PHP Laravel

10. Conclusion

1. Introduction

In this blog post, we’ll be walking through the process of building a sample application with passkey authentication using PHP Laravel. To make passkeys work, we use Corbado’s passkey-first web component that automatically connects to a hosted passkeys backend.

If you want to see the finished code, please have a look at our sample application GitHub repository.

The result looks as follows:

Corbado webcomponent

2. PHP Laravel Passkey Project Prerequisites

This tutorial assumes basic familiarity with PHP, Laravel, JavaScript and HTML. Also make sure to have PHP as well as composer installed and accessible from your shell. Let’s dive in!

Note: We used PHP 8.2.10 with composer 2.5.3.

3. Repository Structure for PHP Laravel Passkey Project

A Laravel project contains many files, but the important ones for us in this tutorial are the following:

4. Set Up Your Corbado Account and Project

Visit the Corbado developer panel to sign up and create your account (you’ll see passkey sign-up in action here!).

Corbado developer panel

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 smoothen 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 host our app on port 8000):

Corbado developer panel

  • Application URL: Provide the URL where you embedded the web component, http://localhost:8000
  • Redirect URL: Provide the URL your app should redirect to after successful authentication and which gets sent a short-term session cookie, here: http://localhost:8000/profile
  • Relying Party ID: Provide the domain (no protocol, no port and no path) where passkeys should be bound to, here: localhost

Also we will need an API secret. Head over to the credentials settings and click on “Add new”:

Corbado developer panel

5. Set Up PHP Laravel App

To initialize our project, we use the following composer command:

composer create-project laravel/laravel passkeys-example-app

We will need the Corbado project ID and the API secret in the next steps, so we’ll add them as environment variables. For this we create a .env file in the project root with the contents of .env.example and paste our Corbado project ID as well as our API Secret:

Additionally, we disable the CSRF-tokens in app/Http/Kernel.php, as that can cause interference with Corbado and we don’t need any backend functionality in Laravel anyway:

As a last step, we will modify the boot function in app/providers/AppServiceProvider.php to always inject the Corbado project ID into our views:

6. Create PHP Laravel Passkey Login Page

Under /resources/views/templates create an index.blade.php file with the content below. This will be our login page. It includes a script from Corbado which we need in the next steps.

The Corbado project ID is injected by the AppServiceProvider we configured a step earlier.

6.1 Embed Passkey Authentication Web Component

We now place the Corbado web component () in the index page template which will handle all means of authentication (e.g. fallbacks, user detection, passkey management):

6.2 Add Route for Passkey Login Page

To make our login page available, we create a route in routes/web.php for the empty path:

7. Create Profile Page

After successful authentication, the Corbado web component redirects the user to the provided Redirect URL (http://localhost:8000/profile). This page displays information about the user and provides a button to log out. In the resources/views folder add a profile.blade.php file with the following content:

Next, create a route inside routes/web.php which points to a profile() method of our default controller which we will create in the next step:

We now create the mentioned profile() method inside the default controller, located at app/Http/Controllers/Controller.php:

We now need to obtain the user information we want to display in the profile.blade.php template.

8. Get Data From Corbado Session

When the user got redirected to the profile page, Corbado created a session. To now obtain the current user in our backend, we can use the Corbado PHP backend SDK. It takes the session, verifies it and uses Corbado’s API to retrieve the data of the current user. Install the SDK with

composer require corbado/php-sdk

Before using it, we initialize it with our Corbado project ID and API Secret. Afterwards, we can call getCurrentUser() to get the currently logged-in user. We hand the user’s values to our view when rendering it.

9. Start Using Passkeys in PHP Laravel

We head into the root directory of our app and install the composer packages before using Laravel’s command line interface artisan to start the local server:

composer install && php artisan serve

When visiting http://localhost:8000 you should see the following screen:

Corbado webcomponent

After successful sign up / login, you see the profile page:

Passkey profile page

10. Conclusion

This tutorial showed how easy it is to add passwordless authentication with passkeys to a PHP Laravel application using Corbado. Besides the passkey-first authentication, Corbado provides simple session management, that we used for a retrieval of basic user data. If you want to read more about how you can leverage Corbado’s session management, please check out our documentation here.

💖 💪 🙅 🚩
vdelitz
vdelitz

Posted on November 20, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related