Posted on Oct 5 There are numerous ways to authenticate users, ranging from the basic username and password to advanced methods like JWT authentication, magic link, OTP, TOTP, security keys, and many more.Passkeys have become the latest authentication trend. This new and convenient method eliminates the use of passwords or email codes for logging in. Passkeys allow users to access applications through their device's screen lock, such as fingerprint or face ID. Unlike passwords, passkeys are highly secure and protected from phishing attacks. They are also more secure than SMS OTPs, which can make users vulnerable to sim swapping.Throughout this tutorial, you’re going to be learning about how you can implement passkeys authentication in your own app, with Authsignal which is an authentication as a service product which enables you to implement multi-factor passwordless authentication in the easiest ways possible.Having a basic knowledge of JavaScript and React is recommended to follow this tutorial more easily.Before proceeding with the tutorial, you need to create an Authsignal project. For this, you can go to authsignal.com and click on Create Free Account. Then you can go through their simple procedure and get your organization configured. In the last step, you will create your first tenant - a project inside your Authsignal organization. Choose any name for your tenant and select the data storage region. Now that you have your Authsignal account configured you need to configure the authenticators that you’re going to be using for your project. We are going to be using email magic links and passkeys as the authenticators in this project. To configure those, click on the configure button you can see on the dashboard page.and then you would see all the authenticators that you can use. First, let’s configure the email magic link. To do that, click on the Set up Email Magic Link button and select Authsignal as the email provider. Now you have successfully configured email magic link as an authenticator.Configuring passkeys has a pretty similar process, click on the Set up Passkey button. Since we’re just testing on localhost for the time being, make sure to set the Relying Party ID as localhost. (Make sure to change this when you’re moving your application to production)Now you have successfully configured both the passkey and email magic link as authenticators.To connect Authsignal to your Next.JS application you would need the API key and some more information. You can obtain this information by clicking on the API Keys section in the left sidebar.Take note of these because you’re going to need them in future steps.Now that we have completed the Authsignal setup, we can now proceed with the coding phase. We will be utilizing the Next.JS framework for our application development. Although React is an option, it requires a separate backend setup, making Next.JS a more practical choice.First, bootstrap a brand new Next.JS project by opening your CLI and running the following command.Then during the installation, you will see some prompts. I am going to use typescript and tailwind for this project but I am not going to use the Next.JS app router to keep this guide simple, also make sure to opt-in to creating a src folder to make following this tutorial easier.Now that you have the Next.JS project configured, let’s install the required dependencies. To do this cd into the folder that your project is in and run the following the commandTwo authsignal packages will be used to make communication with Authsignal servers easier, axios will be used to make HTTP requests to the backend from the frontend, uuid package will be used to generate a random identifier for new users, jwt-decode and cookie packages will be used to manage the user’s session inside the app.Before setting up authentication, you need to feed your API keys and other information into the project. In order to do this, create a .env.local file in the root of your project and add the following.You need to fill in this information with the details you obtain from your Authsignal dashboard and for the NEXT_PUBLIC_APP_URL you have to include the URL that your app is running on, so if you deploy your app, you need to replace this with the deployed URL.If you're unfamiliar with email magic links, they're a method of authentication that involves entering your email address and receiving a link in your inbox. Once you click on that link, you'll be automatically logged in to the app.To communicate with the Authsignal servers, you need to initialize two Authsignal clients. one for the front end and the other for the back end. We’re going to make use of a custom react hook to initialize the front-end client. To do this, create a new file called useAuthsignalClient.ts inside the hooks folder inside the src folder and then paste the following code.Here, we’re basically initializing a new object from the Authsignal class passing the tenantId and baserUrl to the constructor and we’re returning that from the hook so that we can use our authsignalClient without repeating this code snippet all over again.Now to create our back-end client, create a file called authsignal.ts inside the lib folder and paste the following code snippet.Here also we’re simply initializing an Authsignal object with the secret, apiBaseUrl and redirectUrl. Notice that the redirectUrl points to a backend function called callback, we will create that callback function in a moment.Authsignal SDK is designed in a way so that before doing anything in the front end, you first need to track that action through the backend. You can read more about this in the Authsignal’s documentation.To do this, first, you have to set up an API route. In order to set up an API route, create a new file named email.ts inside the pages/api directory.Then inside that email.ts file, paste this code.Let’s go through the above code now,Now we have the backend ready, let’s move on to the front end and hook our API route with a UI.In the pages folder, you will see a file named index.tsx, which is where you write your front-end logic in Next.JS. Open that file and remove all the content in that file (Also open the styles/globals.css file and remove everything after the 3rd line to get similar styles)First, let’s code a simple interface that looks something like this.Paste the following code in the index.tsx file. This should get a basic interface like the above screenshot up and running.To make everything work, we need to import some libraries. Add these imports at the top of your file.Then inside the HomePage function, we’re first going to initialize all of these hooks. Add the following lines right at the beginning of the HomePage function.Here we’re initializing the Next.JS router, this will be later used in order to redirect the user to the dashboard page after a successful login and then we initialize the hook that we made earlier to communicate with Authsignal from the frontend.Now let’s create the signUp function to allow users to sign up for our application. To do this include the following snippet of code below where you initialized the hooks.Here what we basically do is redirect the user to the Authsignal hosted sign-up page in order to complete the signup process.Before we can test this out, we have to take care of several other things. First of all, we need to take care of the callback function. This is where the user comes after they get authenticated from authsignal. We have already specified our redirect URL as /api/callback. Create a new file, name it callback inside the api folder, and paste the following code.You can find this code snippet in the example repository of Authsignal. What this basically does is take the returning auth token from authsignal and validate if that token is properly authenticated and if that token is properly authenticated, set a cookie named auth-session with that auth token and redirect the user to /dashboard page.Now since we have configured both the email and passkey providers inside of Authsignal, when you click on the sign up button, both the providers will be displayed but we don’t want that. We specifically want only the email provider to be displayed. To do this, go to your Authsignal dashboard, choose the right project if you haven’t already, and then click on the actions menu from the top bar. Click on the new action button and create a new action with the name signUp.Then go to the **rules** menu in the sidebar and click on create rule. Then you can give any name to the rule, choose challenge from the outcome menu, untick passkey and then save the rule.Now you should be good to go ahead and test it. Click on the Sign-Up button and after following the on-screen instructions of entering the email and clicking on the link that you receive to the email, you should be redirected to /dashboard. Because we haven’t yet created a dashboard page, you will be redirected to a 404 page if everything goes well.Now that we successfully get redirected to the dashboard page, let’s code a simple UI to display our email and a logout button that looks something like thisFirst, create a dashboard.tsx page inside the pages folder and paste the following code, then let’s go over the code line by line.We first have a getServerSideProps function on the top of the file. This function runs on the server before the page is rendered to the client. You can read more about this in the Next.JS documentation. Inside the getServerSideProps function,Then inside the page, we simply render the information we got from the server side including a function called logOut that would clear the cookie and redirect the user back to the home page.Also notice that if the user hasn’t enrolled passkeys, we render a text called Save the passkey. We will implement the functionality of this in the next section of the tutorial.If you followed until now, you should have correctly configured magic links as an authentication provider. Now let’s shift our focus to implementing passkeys.First of all, you need to create a new API route. Create a new file, name it passkey.ts inside the api folder, and paste the following code.Nothing really new here, we just track a new action called passkey and send the token we get back to the front end. Now, move on to the dashboard.tsx and inside the Dashboard function, create a new function as follows.What this does is sign up that user with a passkey and reload the page if it is successful, or if it was unsuccessful, we just console.log the error.In the markup, under the onClick handler of **************Save the passkey************** element, call this function like this.Now, if you go to the /dashboard page and click on the **************Save the passkey************** button, your browser will prompt confirm your screen lock and the passkey will be saved. When the page refreshes, the **************Save the passkey************** should disappear.To implement the login side of passkeys, go to index.tsx file, make sure axios is imported and add a new function like follows.Inside this function, we first get the token from the API function we created before and call the passkey sign-in function with that token.Then if it returns a new token, we pass that token to our callback function to complete the login.Now if you go to the homepage and click on the Sign in with an existing passkey button, you should be able to log in with the passkey you previously saved.💡 This article goes over implementing passkeys and using Authsignal in a very basic manner. To implement passkeys in a real-world project. You would need a database to keep track of the user details.As Google has explained here, passkeys are a very novel method of authentication and a very big step towards the passwordless future.But it would be a very daunting task to implement passkeys on your own. This is where authentication as a service services comes in clutch. As we discussed throughout this article, you can set up passkeys to your own application in a few lines of code using Authsignal.If you followed right until the end, now you know how to use Authsignal and more specifically how to implement passkeys without going through much trouble. If you have any problems or if you want to take a look at the final code, you can check the GitHub repository with the completed code.To learn more about Authsignal, visit the Authsignal documentationTemplates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse dev.to staff - Oct 5 Dapinder - Oct 5 Karol Galanciak - Oct 5 Leonardo Muniz - Oct 5 Once suspended, osadavc will not be able to comment or publish posts until their suspension is removed. Once unsuspended, osadavc will be able to comment and publish posts again. Once unpublished, all posts by osadavc will become hidden and only accessible to themselves. If osadavc is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Osada Vidath. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag osadavc: osadavc consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging osadavc will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.