Add "Login with Passkeys" to your AWS Amplify app in <5 mins
Passkey auth is a more popular and secure auth method. In this tutorial, you will learn how to add Passkeys to you web app on AWS Amplify with Pangea AuthN.
Published Apr 30, 2024
Passkeys, passkeys, passkeys! Everyone's talking about them. With Amazon rolling out passkeys last year and Google encouraging users to make them the default authentication method, it raises the question: How do I add them to my app?
If you’re just interested in implementing them, you can skip this section. No offense taken 😉
FIDO2 multidevice credentials more often referred to as “passkeys” is a standard introduced by the FIDO alliance. It’s an extremely powerful way of using public-key cryptography to verify the identity of a user without passwords, multi-factor, etc. The public / private key pair is usually generated and securely stored on a hardware or software authenticator device.
To learn more about how passkeys and authenticators work in detail, check out the Secure By Design Hub article on passkeys.
AWS Amplify is a service that lets you host backends such as databases, storage, etc for your web and mobile applications without manually configuring resources or interfaces between different AWS resources.
In this tutorial, we will build a “Login with Passkeys” authentication using Pangea AuthN and use AWS amplify to perform authenticated CRUD operations on our Amplify backend GraphQL APIs. Thus demonstrating how to add passkeys in 1-click while retaining secure app functions such as our CRUD operations.
In this tutorial, we’re going to leverage Pangea AuthN’s hosted pages to be able to quickly configure passkeys without building all the cryptographic mayhem from scratch 😅. To prove that it’s easy to add passkeys into any application in just a few minutes, I’m going to start with a fresh new Next.js app and implement passkeys in just a few steps.
Head over to pangea.cloud and create an account for free. Then in the developer console, enable the “AuthN” service and grab the following tokens. These tokens will be pasted in your
.env
config file as shown below.Add these tokens into a
.env
file like this:In the
_app.tsx
file with the <AuthProvider>
component that maintains authentication context and state across the application.Now that the AuthProvider keeps context across the application, we can see the login and logout functionality implemented using the useAuth hook in our
src/pages/index.tsx
file.Since we’re using Next.js, we need to add an authorized redirect, so that Pangea’s AuthN hosted pages can successfully redirect us back to the
http://localhost:3000/authenticated
(which is our default login success route in this app) when a user is done authenticating.So first, let’s go under General > Redirect (Callback) Settings and add
http://localhost:3000/authenticated
as a redirect and save it.Here comes the last step, let’s enable Passkeys! Head over to Single Sign On > Passkeys and enable it. Optionally you can choose to enable fallback authentication options based on your desired user experience.
Here’s a quick video on how you can enable it in settings:
Once we test the login and it works successfully, we will get redirected to
http://localhost:3000/authenticated
. Here, you will find a form that asks you for your favorite ice cream flavor.Let’s set up the backend database to make the form work!
Amplify makes it super easy to set up the DynamoDB for a specific GraphQL schema file and its associated GraphQL server all in just one command. Run
Once it pushes the schema successfully to your Amplify backend, you should see the GraphQL endpoint and the GraphQL API key in the terminal output. Update your .env.example with the remaining AWS Amplify credentials:
To prevent malicious users from performing CRUD operations on our Amplify backend databases, we need to be able to validate the user’s authenticated session. We will use middleware to authenticate the request before accessing our sensitive APIs.
Head over to
src/pages/api/send-data.ts
and notice that the last exports the API handler with the withAPIAuthentication
middleware.The
withAPIAuthentication
middleware is consequently implemented in src/utils/authCheck
with a few handy little functions to verify the user's identity based on their session token.Thus, without any extra code, we can easily ensure that ONLY authenticated users can submit their favorite ice cream flavor 🍨!