DEV Community: Ashutosh Bhadauriya

How to add Passkey Login to your React App

Ashutosh Bhadauriya — Tue, 12 Mar 2024 14:26:47 +0000

Passkey authentication is gaining popularity faster than ever before. You must have probably noticed a new 'Sign in with a Passkey' option when logging into places like Github or the Apple Store by now.

With Passkeys, your users can sign in without needing any passwords at all. Instead, it uses Touch ID or Face ID on their device to authenticate them, which makes it way more secure and easier to use than old-school passwords or even the two-factor authentication methods we're used to. On top of that, it provides a super smooth login experience too.

In this tutorial, we'll show you how you can add Passkey login for your users to your React Application using Hanko Passkey API. While we're using Express.js for our backend, the process will be pretty similar if you're working with any other JavaScript or TypeScript-based backend.

We've already built a basic auth and in this guide, we'll focus specifically on how you can add a Passkey login to your existing auth system. So, no reinventing the wheel here; instead, we'll show you how to integrate Passkeys seamlessly with your existing authentication flow. Check out our demo app repo here.

Let's get to building.

Get the API key and Tenant ID from Hanko

Before everything you'll need to get the credentials from Hanko Cloud. So, after creating your account on Hanko and setting up the organization, go ahead and click on 'Create new project,' and then choose 'Passkey infrastructure' and 'Create project'.

Enter your Project name and URL and click on 'Create project'.

Copy the 'Tenant ID', then create an API key, copy the API key secret, and add it to your .env file.

After setting up your React app with an Express backend, you'll need to add environment variables copied above in the backend directory for the APIs we're going to make. The frontend will simply call the APIs to allow users to register and log in with passkeys.



PASSKEYS_API_KEY="your-passkey-api-secret"
NEXT_PUBLIC_PASSKEYS_TENANT_ID="your-tenant-id"

Install the Passkey SDK

Install the JavaScript SDK provided by Hanko and webauth-json package by GitHub. Note that, you need to install the SDK on the backend directory and webauthn-json package on the frontend directory.



npm add @teamhanko/passkeys-sdk @github/webauthn-json

Allow your users to register passkey

When it comes to passkey registration, you'll need to decide where and how your users can add passkeys to their accounts. It's entirely up to you. In our case, we've decided to provide a 'Register Passkey' button on the 'dashboard' page.

On your express backend, you’ll have to use tenant({ ... }).registration.initialize() and .registration.finalize() to create and store a passkey for your user. We'll create a /api/passkeys/register endpoint that will utilize these.

On your frontend, you’ll have to call create() from @github/webauthn-json with the object .registration.initialize() returned.

First, create two services startServerPasskeyRegistration() and finishServerPasskeyRegistration() in the /express-backend/services/passkey.js

In the startServerPasskeyRegistration() function we retrieve the user's information from a database and initiate the passkey registration process by calling the passkeyApi.registration.initialize() method with the user's ID and email. This function returns the options required for creating a new passkey on the client side. The finishServerPasskeyRegistration() function finalizes the registration process by sending the client-side credential to the passkey API.

These functions are then exported to be used in the express-backend/controllers/passkey.js .



import { tenant } from "@teamhanko/passkeys-sdk";
import dotenv from "dotenv";
import db from "../db.js";

dotenv.config();

const passkeyApi = tenant({
  apiKey: process.env.PASSKEYS_API_KEY,
  tenantId: process.env.PASSKEYS_TENANT_ID,
});

async function startServerPasskeyRegistration(userID) {
  const user = db.users.find((user) => user.id === userID);

  const createOptions = await passkeyApi.registration.initialize({
    userId: user.id,
    username: user.email || "",
  });

  return createOptions;
}

async function finishServerPasskeyRegistration(credential) {
  await passkeyApi.registration.finalize(credential);
}

export {
  startServerPasskeyRegistration,
  finishServerPasskeyRegistration,
};

Now we definehandlePasskeyRegister() controller that handles two stages of the passkey registration process: initiation and completion. The function utilizes the helper functions startServerPasskeyRegistration() and finishServerPasskeyRegistration() we created above.



import {
  startServerPasskeyRegistration,
  finishServerPasskeyRegistration,
} from "../service/passkey.js";

async function handlePasskeyRegister(req, res) {
  const { user } = req;
  const userID = user.id;

  if (!userID) {
    return res.status(401).json({ message: "Unauthorized" });
  }
  console.log("userId", userID);

  const { start, finish, credential } = req.body;

  try {
    if (start) {
      const createOptions = await startServerPasskeyRegistration(userID);
      return res.json({ createOptions });
    }
    if (finish) {
      await finishServerPasskeyRegistration(credential);
      return res.json({ message: "Registered Passkey" });
    }
  } catch (error) {
    return res.status(500).json(error);
  }
}

export { handlePasskeyRegister, handlePasskeyLogin };

Now, you can use it in the specific route, here we do it in the /api/passkeys/register endpoint.



import express from "express";
const router = express.Router();
import { handlePasskeyRegister, handlePasskeyLogin } from "../controllers/passkey.js";
import { checkAuth } from "../middleware/auth.js";

router.post("/passkeys/register", checkAuth, handlePasskeyRegister);

export default router;

The backend part is done, now it's time to add the 'Register Passkey' button on the frontend.

Here, the registerPasskey() function handles the passkey registration process. It first sends a request to the server to initiate the registration process and receives the response for creating a new passkey. It then uses the @github/webauthn-json library to create a new passkey credential based on the received options from the response. Finally, it sends another request to the server with the newly created credential to complete the registration process.



import {
    create,
    type CredentialCreationOptionsJSON,
} from "@github/webauthn-json";
import { useNavigate } from "react-router-dom";

import { Button } from "@/components/ui/button";
import { toast } from "sonner"



const Dashboard = () => {

    // your code..

    async function registerPasskey() {
        const createOptionsResponse = await fetch("http://localhost:5001/api/passkeys/register", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            credentials: 'include',
            body: JSON.stringify({ start: true, finish: false, credential: null }),
        });

        const { createOptions } = await createOptionsResponse.json();
        console.log("createOptions", createOptions)

        const credential = await create(
            createOptions as CredentialCreationOptionsJSON,
        );
        console.log(credential)

        const response = await fetch("http://localhost:5001/api/passkeys/register", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            credentials: "include",
            body: JSON.stringify({ start: false, finish: true, credential }),
        });
        console.log(response)

        if (response.ok) {
            toast.success("Registered passkey successfully!");
            return;
        }
    }
    return (
        <div className="p-4">
                <Button
                    onClick={() => registerPasskey()}
                    className="flex justify-center items-center space-x-2 mt-8"
                >
                    Register a new passkey
                </Button>
        </div>
    )
}

export default Dashboard;

With all the necessary things in place, you should now be able to register passkeys successfully.

Allow your users to log in with Passkey

Implementing the login flow will be very similar to the Passkey Registration flow. Inside of /express-backend/services/passkey.js create two more functions startServerPasskeyLogin() and finishServerPasskeyLogin().



async function startServerPasskeyLogin() {
  const options = await passkeyApi.login.initialize();
  return options;
}

async function finishServerPasskeyLogin(options) {
  const response = await passkeyApi.login.finalize(options);
  return response;
}

Now, similar to passkey registration create a handlePasskeyLogin() controller. Here, after the passkey login process is finished, the finishServerPasskeyLogin() returns JWT, which we decode using jose to get the User ID, verify it against the database and create a new session for the user.



async function handlePasskeyLogin(req, res) {
  const { start, finish, options } = req.body;

  try {
    if (start) {
      const loginOptions = await startServerPasskeyLogin();
      return res.json({ loginOptions });
    }
    if (finish) {
      const jwtToken = await finishServerPasskeyLogin(options);
      const userID = await getUserID(jwtToken?.token ?? "");
      console.log("userID from hanko", userID);
      const user = db.users.find((user) => user.id === userID);
      if (!user) {
        return res.status(401).json({ message: "Invalid user" });
      }
      console.log("user", user);
      const sessionId = uuidv4();
      res.cookie("sessionId", sessionId);
      return res.json({ message: " Passkey Login successful" });
    }
  } catch (error) {
    console.error(error);
    return res
      .status(500)
      .json({ message: "An error occurred during the passke login process." });
  }
}

Now you can use this controller in the api/passkeys/login route.



import express from "express";
const router = express.Router();
import { handlePasskeyRegister, handlePasskeyLogin } from "../controllers/passkey.js";
import { checkAuth } from "../middleware/auth.js";


router.post("/passkeys/register", checkAuth, handlePasskeyRegister);
router.post("/passkeys/login", handlePasskeyLogin);

export default router;

Alright, now we just need to create a 'Sign in with a Passkey' button on the frontend and use the endpoints we created above.



import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import useLogin from "@/hooks/useLogin";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { get } from "@github/webauthn-json";

const Login = () => {
    const navigate = useNavigate();

    const { loginUser } = useLogin();
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');


    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        const success = await loginUser(email, password);
        if (success) {
            navigate('/dashboard');
        }
    };

    // the signInWithPasskey function takes care of logging in the user with passkey
    async function signInWithPasskey() {
        const createOptionsResponse = await fetch("http://localhost:5001/api/passkeys/login", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            credentials: 'include',
            body: JSON.stringify({ start: true, finish: false, credential: null }),
        });

        const { loginOptions } = await createOptionsResponse.json();

        // Open "register passkey" dialog
        const options = await get(
            loginOptions as any,
        );

        const response = await fetch("http://localhost:5001/api/passkeys/login", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            credentials: 'include',
            body: JSON.stringify({ start: false, finish: true, options }),
        });

        if (response.ok) {
            console.log("user logged in with passkey")
            navigate("/dashboard")
            return;
        }
    }
    return (
        <div className="w-screen h-screen flex items-center justify-center">
            <Card className="w-full max-w-lg">
                <CardHeader>
                    <CardTitle>Sign In</CardTitle>
                    <CardDescription className="">Choose your preferred sign in method</CardDescription>
                </CardHeader>
                <CardContent>
                    <div className="flex flex-col">
                        <form onSubmit={handleSubmit}>
                            <div className="flex flex-col gap-y-2">
                                <Label>Email</Label>
                                <Input
                                    id="email"
                                    required
                                    name="email"
                                    type="email"
                                    value={email}
                                    onChange={(e) => setEmail(e.target.value)}
                                    autoComplete="email"
                                />
                                <Label>Password</Label>
                                <Input
                                    id="password"
                                    name="password"
                                    type="password"
                                    value={password}
                                    onChange={(e) => setPassword(e.target.value)}
                                    autoComplete="current-password"
                                />
                            </div>
                            <Button type="submit" className="mt-4 w-full">Sign in with Email</Button>
                        </form>
                        <div className="relative mt-4">
                            <div className="absolute inset-0 flex items-center">
                                <span className="w-full border-t" />
                            </div>
                            <div className="relative flex justify-center text-xs uppercase">
                                <span className="bg-background px-2 text-muted-foreground">
                                    Or continue with
                                </span>
                            </div>
                        </div>
                        <Button className="mt-4 w-full" onClick={() => signInWithPasskey()}>Sign in with a Passkey</Button>
                    </div>
                </CardContent>
            </Card>
        </div>
    )
}

export default Login;

Alright, now head over to the login page and try logging in with your passkey 🚀 Check out the application repo here.

Don't hesitate to reach out to us on Discord, if you get into any issues.

Adding passkeys to a Remix App

Ashutosh Bhadauriya — Mon, 04 Mar 2024 10:45:53 +0000

This tutorial will show how you can add passkeys to your Remix app using Hanko. We have a basic auth already setup, that uses email and password to login user. You can follow this awesome guide by Matt Stobbs to see how we have added authentication.

Typically, to add passkeys to any app, you'd need two things:

a backend to handle the authentication flow and store data about your user's passkeys
a couple of functions on your frontend to bring up & handle the "Sign in with passkey" dialog

Let's dive in and see how you will do this.

Get the API key and Tenant ID from Hanko

After creating your account on Hanko and setting up the organization, go ahead and select 'Create new project,' and then choose 'Passkey infrastructure' and 'Create project'.

Provide the Project name and URL and click on 'Create project'. Remember, if you're working on the project locally, the url will be of localhost, for example, http://localhost:3000 .

Copy the 'Tenant ID', create an API key and copy the secret, and add it to your .env file.

PASSKEYS_API_KEY="your-passkey-api-secret"
PASSKEYS_TENANT_ID="your-tenant-id"

Install Hanko Passkey SDK

Install the JavaScript SDK provided by Hanko and webauth-json package by GitHub.

npm add @teamhanko/passkeys-sdk @github/webauthn-json

Allow your users to register passkey

Your users will need to add passkeys to their account. It’s up to you how and where you let them do this. We do it in the app/routes/dashboard.tsx route.

On your backend, you’ll have to call tenant({ ... }).registration.initialize() and .registration.finalize() to create and store a passkey for your user.

On your frontend, you’ll have to call create() from @github/webauthn-json with the object .registration.initialize() returned.

create() will return a PublicKeyCredential object, which you’ll have to pass to .registration.finalize().

Here, we create two functions startServerPasskeyRegistration which uses registration.initialize() endpoint and finishServerPasskeyRegistration which uses registration.finalize() endpoint.

import { tenant } from "@teamhanko/passkeys-sdk";
import { db } from "~/db";

const passkeyApi = tenant({
  apiKey: process.env.PASSKEYS_API_KEY!,
  tenantId: process.env.PASSKEYS_TENANT_ID!,
});

export async function startServerPasskeyRegistration(userID: string) {
  const user = db.users.find((user) => user.id === userID);

  const createOptions = await passkeyApi.registration.initialize({
    userId: user!.id,
    username: user!.email || "",
  });

  return createOptions;
}

export async function finishServerPasskeyRegistration(credential: any) {
  await passkeyApi.registration.finalize(credential);
}

Inside of routes/api.passkeys.register.tsx create a route action using the functions created above. This action will be responsible for registering the passkey for the user.

import { json } from "@remix-run/node";
import { finishServerPasskeyRegistration, startServerPasskeyRegistration } from "~/utils/passkey.server";
import { getSession } from "~/utils/session.server";


export const action = async ({ request }: { request: Request }) => {

    const sessionData = await getSession(request);
    const userID = sessionData.get("userId");

    if (!userID) {
        return json({ message: "Unauthorized" }, 401);
    }
    const { start, finish, credential } = await request.json();

    try {
        if (start) {
            const createOptions = await startServerPasskeyRegistration(userID);
            return json({ createOptions });
        }
        if (finish) {
            await finishServerPasskeyRegistration(credential);
            return json({ message: "Registered Passkey" });
        }
    } catch (error) {
        return json(error, 500);
    }
};

Now, we're done with the backend setup. Next up, let's add a "Register Passkey" button. We'll use the endpoints we set up earlier to generate and save a passkey for the user.

import { Form } from "@remix-   run/react";
import { Button } from "~/components/ui/button";
import { toast } from "sonner"

import {
    create,
    type CredentialCreationOptionsJSON,
} from "@github/webauthn-json";
import { json, LoaderFunction, redirect } from "@remix-run/node";
import { getUserId } from "~/utils/session.server";

export const loader: LoaderFunction = async ({ request }) => {
    const userId = await getUserId(request);
    console.log(userId)
    if (!userId) return redirect("/login");
    return json({});
  }

export default function DashboardPage() {
    async function registerPasskey() {
        const createOptionsResponse = await fetch("/api/passkeys/register", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ start: true, finish: false, credential: null }),
        });

        const { createOptions } = await createOptionsResponse.json();

        // Open "register passkey" dialog
        const credential = await create(
            createOptions as CredentialCreationOptionsJSON,
        );

        const response = await fetch("/api/passkeys/register", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ start: false, finish: true, credential }),
        });

        if (response.ok) {
            toast.success("Registered passkey successfully!");
            return;
        }
    }
    return (
        <div className="p-4">
            <Form action="/logout" method="post">
                <Button type="submit" variant="link">
                    Logout
                </Button>
            </Form>
            <div>
                <Button
                    onClick={() => registerPasskey()}
                    className="flex justify-center items-center space-x-2"
                >
                    Register a new passkey
                </Button>
            </div>
        </div>
    );
}

If everything is set up correctly, now you should be able to register the passkey.

Adding the SignIn with Passkey functionality

The process will be very similar to Passkey Registration. Inside of utils/passkey.server.ts add two more functions startServerPasskeyLogin() and finishServerPasskeyLogin() which use the login.initialize() and login.finalize() endpoints respectively.

export async function startServerPasskeyLogin() {
  const options = await passkeyApi.login.initialize();
  return options;
}

export async function finishServerPasskeyLogin(options: any) {
  const response = await passkeyApi.login.finalize(options);
  return response;
}

Now, similar to passkey registration create a route action routes/api.passkeys.login.tsx to log in the user. Here, after the login process is finished, the finishServerPasskeyLogin returns JWT, which we decode using jose to get the User ID and create a new session for the user.

import { json } from "@remix-run/node";
import { getUserID } from "~/utils/get-user-id.server";
import { finishServerPasskeyLogin, startServerPasskeyLogin } from "~/utils/passkey.server";
import { createUserSession } from "~/utils/session.server";

export const action = async ({ request }: { request: Request }) => {
    const { start, finish, options } = await request.json();

    try {
        if (start) {
            const loginOptions = await startServerPasskeyLogin();
            return json({ loginOptions });
        }
        if (finish) {
            const jwtToken = await finishServerPasskeyLogin(options);
            const userID = await getUserID(jwtToken?.token ?? '');

            return createUserSession({
                request,
                userId: userID ?? '',
            });
        }
    } catch (error) {
        if(error instanceof Response){
            return error;
        }
        return json(error, 500);
    }
};

Here's the function to extract the UserID from jose.

// app/utils/get-user-id.server.ts

import * as jose from "jose";

export async function getUserID(token: string) {
  const payload = jose.decodeJwt(token ?? "");

  const userID = payload.sub;
  return userID;
}

Alright, now we just need to create a 'SignIn with Passkey' button and use the endpoints we created above. After the response is successful, we navigate the user to /dashboard route.

import { ActionFunction } from "@remix-run/node";
import { Form, useNavigate } from "@remix-run/react";
import { Button } from "~/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
import { createUserSession, verifyLogin } from "~/utils/session.server";
import { get } from "@github/webauthn-json";

export const action: ActionFunction = async ({ request }) => {
    const formData = await request.formData();
    const email = formData.get("email") as string;
    const password = formData.get("password") as string;

    const user = await verifyLogin(email, password);

    if (!user) {
        return new Response("Invalid email or password", {
            status: 401,
            headers: {
                "Content-Type": "text/plain",
            },
        });
    }

    return createUserSession({
        request,
        userId: user.id,
    });
}

export default function LoginPage() {
    const navigate = useNavigate();

    // here we add the 
    async function signInWithPasskey() {
        const createOptionsResponse = await fetch("/api/passkeys/login", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ start: true, finish: false, credential: null }),
        });

        const { loginOptions } = await createOptionsResponse.json();

        // Open "login passkey" dialog
        const options = await get(
            loginOptions as any,
        );

        const response = await fetch("/api/passkeys/login", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ start: false, finish: true, options }),
        });

        if (response.ok) {
            console.log("user logged in with passkey")
            navigate("/dashboard")
            return;
        }
    }
    return (
        <div>
            <div className="w-screen h-screen flex items-center justify-center">
                <Card className="w-full max-w-lg">
                    <CardHeader>
                        <CardTitle>Sign In</CardTitle>
                        <CardDescription className="">Choose your preferred sign in method</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div className="flex flex-col">
                            <Form method="POST">
                                <div className="flex flex-col gap-y-2">
                                    <Label>Email</Label>
                                    <Input
                                        id="email"
                                        required
                                        name="email"
                                        type="email"
                                        autoComplete="email"
                                    />
                                    <Label>Password</Label>
                                    <Input
                                        id="password"
                                        name="password"
                                        type="password"
                                        autoComplete="current-password"
                                    />
                                </div>
                                <Button type="submit" className="mt-4 w-full">Sign in with Email</Button>
                            </Form>
                            <div className="relative mt-4">
                                <div className="absolute inset-0 flex items-center">
                                    <span className="w-full border-t" />
                                </div>
                                <div className="relative flex justify-center text-xs uppercase">
                                    <span className="bg-background px-2 text-muted-foreground">
                                        Or continue with
                                    </span>
                                </div>
                            </div>
                            <Button className="mt-4 w-full" onClick={() => signInWithPasskey()}>Passkey</Button>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </div>
    );
}

That's all. You have successfully integrated Passkey login to your remix app, making the authentication process much easier and smoother for your user 🚀

Check out the github repo, if you wanna play around.

teamhanko / passkeys-remix

Adding Passkey Login to Remix with Hanko

This repo shows how you can add passkey login with Hanko Passkey API to your Remix app.

Clone the repo

git clone https://github.com/teamhanko/remix-passkeys.git

Add the environment variables

Add the following environment variables to .env.local file.

PASSKEYS_API_KEY=your-hanko-passkey-api-key
PASSKEYS_TENANT_ID=your-hanko-passkey-tenant-id

Install dependencies

pnpm install

Run the project

pnpm run dev

View on GitHub

How to add Passkey Login to Next.js using NextAuth and Hanko

Ashutosh Bhadauriya — Mon, 04 Mar 2024 06:45:17 +0000

When logging in to Apple Store or GitHub, you must have seen a new 'Sign in with Passkey' button. Passkey login is a cool new way to sign in without needing any passwords. It uses Touch ID or Face ID on your device to authenticate, which makes it way more secure and easier to use than old-school passwords and even those two-factor authentication methods we're used to.

Typically, to add passkeys to any app, you'd need two things:

a backend to handle the authentication flow and store data about your user's passkeys
a couple of functions on your frontend to bring up & handle the "Sign in with passkey" dialog

If you're using Next.js, you can easily do both of these things with NextAuth and our accompanying provider @teamhanko/passkeys-next-auth-provider.

Our open-source passkey server is an API you can call from your (Next.js) backend to handle the authentication flow (and storing all relevant data about your user's passkeys).

@teamhanko/passkeys-next-auth-provider is a NextAuth provider that calls this API for you, and lets you bring up the "Sign in with passkey" with a single function call.

@github/webauthn-json is an optional package that makes it easier to work with the WebAuthn API on your frontend.

The tech stack we'll use.

Next.js 14
NextAuth for adding auth
Resend for sending magic links for auth
Supabase as our DB
Shadcn UI for pretty UI out of the box

We have already configured everything and in this tutorial, we'll be just showing how you can add Passkey login. Let’s get to building. You can either follow the video or go through the guide.

Add Passkey Login to Next.js using NextAuth and Hanko - YouTube

In this video we show you how fast and easy it is to add Passkey login to Next.js app using NextAuth thanks to the Hanko Passkeys API

youtube.com

We'll be using NextAuth for authentication and passkey provider for NextAuth by Hanko to add passkey login functionality. After initializing your Next.js and configuring NextAuth you'll need to get the Hanko API key secret and Tenant ID. Navigate over to Hanko Cloud to grab those.

Get the API key and Tenant ID from Hanko

After creating your account on Hanko and setting up the organization, go ahead and select 'Create new project,' and then choose 'Passkey infrastructure' and 'Create project'.

Provide your Project name and URL and click on 'Create project'.

Copy the 'Tenant ID', create an API key, and add it to your .env file.

PASSKEYS_API_KEY="your-passkey-api-secret"
NEXT_PUBLIC_PASSKEYS_TENANT_ID="your-tenant-id"

Install the NextAuth Passkey provider

Install the passkey provider for NextAuth from Hanko and webauthn-json package by GitHub.

pnpm add @teamhanko/passkeys-next-auth-provider @github/webauthn-json

Add the Passkey provider to NextAuth

PasskeyProvider({
      tenant: tenant({
        apiKey: process.env.PASSKEYS_API_KEY!,
        tenantId: process.env.NEXT_PUBLIC_PASSKEYS_TENANT_ID!,
      }),
      async authorize({ userId }) {
        const user = await prisma.user.findUnique({ where: { id: userId } });
        if (!user) return null;
        return user;
      },
    }),

As we're using Prisma Adapter by NextAuth, we'll need to also to use session: { strategy: "jwt" } and modify the session to get id from token.sub. This is how the complete code for auth.ts the file looks after adding Hanko passkey provider.

Note that, if you don't plan to use any adapters, you just need to add the Passkey provider and don't modify anything.

import type { NextAuthOptions } from "next-auth";
import GitHubProvider from "next-auth/providers/github";
import EmailProvider from "next-auth/providers/email";
import { PrismaAdapter } from "@auth/prisma-adapter";
import {
  tenant,
  PasskeyProvider,
} from "@teamhanko/passkeys-next-auth-provider";

import prisma from "./db";

export const authOptions = {
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID!,
      clientSecret: process.env.GITHUB_SECRET_ID!,
      allowDangerousEmailAccountLinking: true,
    }),
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
    PasskeyProvider({
      tenant: tenant({
        apiKey: process.env.PASSKEYS_API_KEY!,
        tenantId: process.env.NEXT_PUBLIC_PASSKEYS_TENANT_ID!,
      }),
      async authorize({ userId }) {
        const user = await prisma.user.findUnique({ where: { id: userId } });
        if (!user) return null;
        return user;
      },
    }),
  ],
  adapter: PrismaAdapter(prisma),
  session: { strategy: "jwt" },
  callbacks: {
    session: ({ session, token }) => {
      if (token) {
        return {
          ...session,
          user: {
            ...session.user,
            id: token.sub,
          },
        };
      } else {
        return session;
      }
    },
  },
} satisfies NextAuthOptions;

Allow your users to register passkey as a login method

Your users will have to add passkeys to their account somehow. It’s up to you how and where you let them do this, but typically this would be a button on an “Account Settings” page.

On your backend, you’ll have to call tenant({ ... }).registration.initialize() and .registration.finalize() to create and store a passkey for your user.

On your frontend, you’ll have to call create() from @github/webauthn-json with the object .registration.initialize() returned.

create() will return a PublicKeyCredential object, which you’ll have to pass to .registration.finalize().

Here we have created a new file named passkey.ts, inside of the server directory.

"use server"

import { getServerSession } from "next-auth";
import { tenant } from "@teamhanko/passkeys-next-auth-provider";
import prisma from "./db";
import { authOptions } from "./auth";

const passkeyApi = tenant({
    apiKey: process.env.PASSKEYS_API_KEY!,
    tenantId: process.env.NEXT_PUBLIC_PASSKEYS_TENANT_ID!,
});

export async function startServerPasskeyRegistration() {
    const session = await getServerSession(authOptions);
    const sessionUser = session?.user;

    const user = await prisma.user.findUnique({
        where: { email: sessionUser?.email as string },
        select: { id: true, name: true },
    });

    const createOptions = await passkeyApi.registration.initialize({
        userId: user!.id,
        username: user!.name || "",
    });

    return createOptions;
}

export async function finishServerPasskeyRegistration(credential: any) {
    const session = await getServerSession(authOptions);
    if (!session) throw new Error("Not logged in");

    await passkeyApi.registration.finalize(credential);
}

Alright, now let's get to creating a 'Passkey register' button. This is what kicks off the whole Passkey registration process for that user account.

"use client"

import { finishServerPasskeyRegistration, startServerPasskeyRegistration } from '@/lib/passkey';
import { Button } from './ui/button';
import Passkey from './icons/passkey';
import {
    create,
    type CredentialCreationOptionsJSON,
} from "@github/webauthn-json";

const RegisterNewPasskey = () => {
    async function registerPasskey() {
        const createOptions = await startServerPasskeyRegistration();
        const credential = await create(createOptions as CredentialCreationOptionsJSON);
        await finishServerPasskeyRegistration(credential);
    }
    return (
        <Button
            onClick={() => registerPasskey()}
            className="flex justify-center items-center space-x-2"
        >
            <Passkey className="w-4 h-4 mr-2" />
            Register a new passkey
        </Button>
    )
}

export default RegisterNewPasskey

Add a button to allow your users to log in with a passkey

Now that the passkey is successfully registered, let's add a 'Sign in with Passkey' button. This will allow users to easily login using their passkey.

"use client"

import Passkey from "./icons/passkey";
import { Button } from "./ui/button";
import { signInWithPasskey } from "@teamhanko/passkeys-next-auth-provider/client";

const SignInWithPasskey = () => {
    return (
        <Button onClick={() => signInWithPasskey({ tenantId: process.env.NEXT_PUBLIC_PASSKEYS_TENANT_ID!, callbackUrl: `${window.location.origin}/dashboard/settings` })} className="mt-4" variant="secondary"> <Passkey className="w-4 h-4 mr-2" /> Passkey </Button>
    )
}

export default SignInWithPasskey

And that's it! You now have a working Passkey login, making the authentication process much easier for your users 🚀

If you want to take a closer look or try it out for yourself, feel free to check out our GitHub repo.

teamhanko / passkeys-next-auth-starter

Hanko Passkey Starter for Next-Auth

This repo shows how you can add passkey login with Hanko Passkey API to your Next.js app that uses Next-Auth for authentication.

Technologies used

Clone the repo

git clone https://github.com/teamhanko/passkeys-next-auth-starter.git

Add the environment variables

Add the following environment variables to .env.local file.

NEXTAUTH_SECRET=random-string
NEXTAUTH_URL=http://localhost:3000

GITHUB_ID=
GITHUB_SECRET_ID=

# for email service
EMAIL_SERVER_USER=resend
EMAIL_SERVER_PASSWORD=your-resend-api-key
EMAIL_SERVER_HOST=smtp.resend.com
EMAIL_SERVER_PORT=465
EMAIL_FROM=onboarding@resend.dev

DATABASE_URL=your-db-url

PASSKEYS_API_KEY=your-hanko-passkey-api-key
NEXT_PUBLIC_PASSKEYS_TENANT_ID=your-hanko-passkey-tenant-id

Install dependencies

pnpm install

Run the project

pnpm run dev

View on GitHub

Send Hanko auth emails from your domain via Resend

Ashutosh Bhadauriya — Mon, 04 Sep 2023 12:37:45 +0000

Hanko has made it incredibly simple to add authentication to your application and get started quickly. However, you may have noticed, currently, all emails are sent from mail@hankocloud.com

While this works perfectly initially, as your product grows, you might wanna send emails through your custom domain to enhance brand visibility and have full control over your emails. Hanko makes it super easy for you to do that through your custom SMTP server.

We'll be using the SMTP server provided by Resend for this purpose. Resend is a modern tool that makes it super easy to send and manage transactional emails. Additionally, it will enable you to monitor all your Hanko authentication emails and verify if they were actually sent.

So, let's get started.

Head over to Resend and create an account if you haven't yet. Navigate to Domains section in the right sidebar, click on 'Add domain', and add your domain and region.

Now you'll need to create an API key. Go to the API Keys section, click on 'Create API Key', and fill in the required details.

Navigate to resend SMTP page, you'll see all the details of your SMTP server here. You'll need to copy-paste these to Hanko.

Next, go to your Hanko project and navigate to 'Settings' in the sidebar. Click on 'SMTP' there and fill in the details.

Copy the host, port, and username from resend. Next, in the 'Password' section, enter the API key you got from Resend. In the 'Sender email address' section, put the email address you'll be sending emails from, and then hit 'Save'.

And there you go! Your emails are now ready to be sent from your custom domain 🎉

Check the Resend docs to know more about it.

Spice Up Your NextJS skills the Pro Way

Ashutosh Bhadauriya — Sun, 14 May 2023 11:15:20 +0000

You’ve been learning NextJS for a while now, and you are getting pretty good at it. Congrats, that's awesome! But as we all know learning never stops, especially in this fast-paced world of NextJS. So, you might be thinking what’s next then? Checking out how folks in the open source are using NextJS for building real-world apps should be your next step.

Open-source projects are the best way to level up your knowledge. They're kind of like a sneak peek into how all those NextJs concepts you've learned are put to use in the wild. Plus, they're a great place to see how the experts in the field tackle problems. So, I’ve put together a list of some really cool and popular open-source projects built with NextJS.

Open source isn't just about learning; it's about joining in too. So if you’re willing to contribute to any of the projects, don't be shy. Jump in, suggest changes, and chat about ideas and break the ice. It's the best way to really get your grip tight and learn from the best. Enough talking, let's get to projects now.

Cal

Cal.com is an awesome open-source scheduling tool. Think of it like a cooler version of Calendly and it's super user-friendly too. And guess what? It's not just some small project. It's actually one of the best and biggest open-source Next projects out there. You’ll definitely learn a lot from this.

Dub

Dub is an open-source link management tool for modern marketing teams to create, share, and track short links. Again, you can think of it as a better version of Bitly. It's built by the awesome Steven Tey, and he keeps sharing updates regarding the project on Twitter, definitely worth the follow.

RoomGPT

RoomGPT is the coolest open-source project on the list, you should definitely check it out. It's like your personal interior designer but instead of a human, it's all powered by AI. Got a messy room? No problem. Just take a picture, upload it to RoomGPT, and within seconds, you get a fresh, redesigned look.

React email

React email is a collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript. It reduces the pain of coding responsive emails and also comes with dark mode support. It also takes care of inconsistencies between Gmail, Outlook, and other email clients for you. A great resource again, you’ll definitely learn a lot.

Taxonomy

Taxonomy is not an actual app, but a demo app built using NextJS’s latest app directory. I have learned a lot from it regarding the best practices, the file structure and so much more. Based on the new app directory, it's an open-source project built by Shadcn with all the features you need to get started like authentication, payment integration using stripe, docs, and blog using mdx and content layer, ORM, database. You say it, you have it.

That’s all!

These projects are remarkable and each one has its own flavor. It's clear that NextJS is a robust framework for all types of real-world apps. Now, it's your turn to engage with these projects, learn, become a pro, and make your next great app.

Just a reminder that the open-source community isn't just about watching from the sidelines, but also involving yourself in it. So if you have been waiting long to contribute to open source, now is your chance.

Don't hold back. Dive deep into these projects, get your hands dirty, and learn from the OGs. The journey might be challenging initially, but it's equally rewarding in the end.

Become the NextJS 13 Ninja with these resources

Ashutosh Bhadauriya — Wed, 10 May 2023 11:51:59 +0000

NextJS has gradually become the default choice of frontend developers be it side projects or production-grade applications. Recently I was trying to learn NextJS 13, yeah couldn’t beat the FOMO, and lazy me didn’t want to learn through docs. And the law of attraction did work in my favor this time, came across these resources, thanks to Twitter and Youtube. If you’re the one trying to find some great resources other than docs here you go.

Dave Grays NextJS 13 playlist

I found Dave Gray's YouTube channel when I was trying to understand TypeScript, and I was having a hard time finding any helpful stuff. But what an amazing teacher he is, you would love his way of teaching too. So, if you're someone who likes learning from videos more than reading, you should really check his NextJS playlist.

Taxonomy

This is the last thing you need to become a NextJS 13 ninja and built your next production-grade app. I myself have learned a lot from it be it regarding the best practices, the file structure and so much more. Based on the new app directory, it's an open-source project built by shadcn with all the features you need to get started like authentication, payment integration using stripe, docs, and blog using mdx and Contentlayer, ORM, and database. You say it, you have it. Yeah, it's written in typescript too.

Official Docs

How can we forget that? The NextJS docs are top-notch, super beginner friendly, and will be your go-to resource always.

nextjs.org

So, were you also planning to learn NextJS 13, now you don’t have any reason to procrastinate. Let’s gooo! 🫡

Understanding Basic Types in TypeScript

Ashutosh Bhadauriya — Mon, 08 May 2023 07:11:26 +0000

TypeScript, the superset of JavaScript, has been growing in popularity due to its ability to catch errors during compile-time, improve code readability, and simplify refactoring. With TypeScript's type system, you can enhance the code quality while taking advantage of new features. In this blog post, I’ll dive into the basic types in TypeScript, exploring each one in detail.

The Importance of Types in TypeScript

Types play a significant role in TypeScript, providing type-checking and error-catching at compile-time. By leveraging the power of types, you can catch errors before they even escalate, enhance code readability for team members, and make refactoring a breeze. Let's dive into the basic types in TypeScript and see how they can benefit your projects.

The Basic Types

Let's get started with the fun stuff. TypeScript’s type inference feature automatically determines a variable's data type. However, it's generally a good idea to declare data types when initializing variables.

We assign data types by simply placing a colon after the variable name but before the equal sign:

const {variable name}: {variable type} = {variable value}

This is the convention that most TypeScript data types are declared except for functions and objects.

Some data types come with a bit more complex than that, but you get the general idea. Below are some brief explanations of data types and examples of how to declare them.

Boolean

The boolean type is used to represent true or false values.

let isActive: boolean = true;

Number

In TypeScript, all numeric values are represented by the number type, including integers and floating-point values.

let age: number = 25;
let weight: number = 68.5;

String

The string type represents text values.

let name: string = "John Doe";

Array

Arrays are used to store collections of values. TypeScript supports two syntaxes for defining arrays: Type[] or Array<Type>.

let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Alice", "Bob", "Carol"];

Tuple

Tuples allow you to create an array with a fixed number of elements of known types.

let person: [string, number] = ["John Doe", 25];

Enum

Enums provide a way to create user-defined types with a set of named constants.

enum Color {
  Red,
  Green,
  Blue,
}
let color: Color = Color.Red;

Any

The any type is used when the type is unknown or can change at runtime.

let unknownValue: any = 4;
unknownValue = "A string";
unknownValue = true;

Void

The void type is typically used as a return type for functions that do not return any value.

function logMessage(message: string): void {
  console.log(message);
}

Null and Undefined

Both null and undefined have their respective types in TypeScript. They are often used as subtypes of other types.

let empty: null = null;
let notDefined: undefined = undefined;

Never

The never type represents a value that never occurs, typically used for functions that always throw an error or have an infinite loop.

function throwError(message: string): never {
  throw new Error(message);
}

Type Inference and Type Annotations

TypeScript has a powerful type inference system that tries to deduce the types of variables and function return values based on their usage. It means that often, you don't need to explicitly specify types, as the compiler can infer them for you.

let inferredString = "Hello, World!"; // TypeScript infers the type 'string'
let inferredNumber = 42; // TypeScript infers the type 'number'

However, there are cases when the compiler might not be able to infer the correct type or when you want to be more explicit about the types you're using. In such cases, you can use type annotations to explicitly specify the type of a variable or a function's return value.

let annotatedString: string = "Hello, World!";
let annotatedNumber: number = 42;

function add(a: number, b: number): number {
  return a + b;
}

Type Aliases and Custom Types

Type aliases provide a way to create custom types by either giving a new name to an existing type or defining a new type using a combination of existing types. This can help improve code readability and maintainability by creating more descriptive types tailored to your application.

Creating a type alias for an existing type

type Age = number;
let personAge: Age = 30;

In this example, we create a type alias Age for the number type, making it more descriptive and specific to our application.

Defining a new type using a combination of existing types

type Point = {
  x: number;
  y: number;
};

let point: Point = {
  x: 5,
  y: 10,
};

Here, we create a new custom type called Point using an object type with two properties, x and y. This makes it easier to understand the structure of the object and its purpose in our application.

Using union types with type aliases

Type aliases can also be combined with union types, allowing you to create a custom type that can hold different values.

type StringOrNumber = string | number;

let inputValue: StringOrNumber = "TypeScript";
inputValue = 42;

In this example, we create a type alias called StringOrNumber that can hold either a string or a number. This provides flexibility in our application while maintaining type safety

Union and Intersection Types

Union and intersection types play crucial roles in creating complex type definitions, allowing developers to combine types in flexible and powerful ways.

Union types

Union types represent a value that can be of one of several types. It is denoted using the | symbol between the types.

type StringOrNumber = string | number;

function printValue(value: StringOrNumber) {
  console.log(value);
}

printValue("Hello, World!");
printValue(42);

In this example, the StringOrNumber type is a union type that can be either a string or a number. The printValue function accepts a parameter of this union type, allowing it to handle both strings and numbers.

Intersection types

Intersection types are used to combine multiple types into one, creating a new type that includes all the properties of the original types. It is denoted using the & symbol between the types.

type A = {
  a: string;
};

type B = {
  b: string;
};

type C = A & B;

let objectC: C = {
  a: "Hello",
  b: "World",
};

In this example, the C type is an intersection type that combines the properties of both A and B. The objectC variable must have both a and b properties, as defined by the intersection type.

That's a wrap!!

Understanding and utilizing TypeScript's basic types can have a significant impact on the quality of your code. It helps catch errors during compile time, improves code readability, and simplifies refactoring. As you continue to work with TypeScript, you'll discover even more benefits of this powerful language. I encourage you to explore TypeScript further and apply these concepts to your own projects, creating more robust and maintainable codebases. See you in next one 👋

Is programming for Everyone..?🤔

Ashutosh Bhadauriya — Sun, 05 Sep 2021 06:42:27 +0000

So, What do you think? According to me it depends on an individual. If a person decides to enter in programming with a Never Give Up attitude then sure he can do it but if someone has already made his mind that it is not for me, then nothing can change it. It is a person's attitude that decides if he is going to be successful in the field chosen by him or not.

Story Time..

Why is the Lion considered King of Jungle?

Is it the biggest? No, Elephants are bigger. Is it the smartest? No, Hyenas are smarter than Lions. So, it might be the most intelligent. The answer is no again. Chimpanzees are more intelligent. It is not the tallest as well, Giraffe is taller.

But but but...When an elephant sees a lion, he runs, even though he's bigger, stronger, smarter and more powerful than a Lion. So, why is it? The elephant is a victim of how he thinks!! When the lion sees an elephant, he runs towards the elephant because he believes that he can hop on elephant and eat it.

What's wrong here?

Any guesses? Yes, you guessed it right. The lion is the king of the Jungle because he thinks he is. He has different attitude and his actions reflect the way he thinks. This attitude makes all the animal kingdom respect the lion more than any other animal.

Attitude is the result of our beliefs. Our actions reflect what we believe. We become what we believe. We limit ourselves by what we believe. So, the need of the hour is to start believing in yourself and stop putting yourself down and have confidence in your belief.

No one can live beyond the limits of their beliefs.

So, stop thinking "I can't do this." Stop making excuses. Is someone say's you can't do it, let them say and you do what you believe. Change your belief system. Your ability to become a programmer is trapped by you and your belief.

Hope this was the motivation you needed to start your programming journey. Thanks for reading and let's start our journey together. Have an amazing day..✌

MUST DO JAVASCRIPT PROJECTS FOR BEGINNERS

Ashutosh Bhadauriya — Sat, 27 Mar 2021 16:15:03 +0000

Hellooo..Coders, When we start with our programming journey we tend to get confused at every step we take, but no worries this happens with everyone, you're not alone.

In this blog I am going to share with you some simple projects, which can help you get started with. If you think you can build them easily you can skip them and build some intermediate projects.

Calculator

There are high chances that you have already build one. But if you haven't then you should definitely give it a try. This is the best project to get started, as it is easy and best to clear your basics. You can also take this project at next level by making it more advance.

To Do List

To Do List is a another great project to test your programming skills. By implementing this app you are going to face new challenges and learn how an app can be used in real life. It involves buttons, animation, user interaction and events. So, don't miss this project, you will learn a lot through this.

BMI Application

Similar to to-do list in this project also you will be creating basic layout and perform some basic logic on the basis of input entered by the user. By using this applcation users can calculate their Body Mass Index(BMI). Inputs and formulas will be the main components of this application.

TIC TAC TOE

Yes, this is famous childhood game. Can you build this..? You might think it will be easy, but according to me it is going to be the most difficult in this list. It is not as easy as it sounds. It requires a bit of strategy. Layout creation part is the easiest, the logic is where it gets interesting. It will be the best project to exercise you mind. Don't even think of missing this one.

Rock Paper Scissor

Second project in our list is Rock Paper Scissor you should definitely try out. It requires both user input and randomizing element. The outcome will be a basic and interesting game.

Snake Game

Sounds difficult? No worries you can do it. Snake game is just a sequence of logical pieces. With a thorough understanding of a language you can build this project.

Yes, this is it. But I would like to give you a tip if you're just starting with your coding journey.

Don't get into complex projects initially as that can easily get intimidating. Take one step at a time and move upwards gradually.

Now, you have these projects pick one and get started without any excuse.

The basics of Programming

Ashutosh Bhadauriya — Tue, 23 Mar 2021 14:59:39 +0000

Hello 👋 Coders, This is my first blog post so thought why not cover the basics as it will be easy for me to start with and easy for you to understand if you're beginning your coding journey.

So, let's start with one step at a time..

What is Programming?

Programming is the process of giving computer intructions on how to act. Yes, this is it. Wait wait..how can one give instructions of computer. Do Computers understand us? The answer is no, Computers cannot understand us. They understand only binaries (0 and 1). The instructions that we give them are given through code.
This code can be in various programming languages.

Programming language is a language that is used by programmers to communicate with computers. It is a set of instructions written in any specific language like C++, Java, Pyhton, etc.

There are five basic concepts in any Programming Language..

Variables
Conditional Statetments
Looping & Iteration
Data types and Data Structures
Functions

Variables

Consider them a boxes, that are used to store data or reference to data. There can be many properties of variables like a name, type, value, scope, lifetime and location. We'll discuss them in details in my future posts as this is out of scope for now.

Conditional Statements

These statements are also known as "if-else" statements, and it is as simple as it sounds. Yeah, you guessed it right. If the given condition satisfies do this or do that (execute else codition).

Iteration & Looping

Let me ask you something. What if you want to print some statement more than 100 times. What will you do? OK OK I am not considering that your typing speed is 200 wpm. Even if you have, why will you type something again and again if you can do the same in less than 3 lines. Here comes iteration and looping. If program repeats a sequence or process, that is an iteration. Loops are a type of iteration, where a program carries out an action until new condition is met. In easier words, you will not need to write the same thing again and again.

Data Types & Data Structures

A Data Type is the most basic classification of a data. So, basically it is the type of any variable used in the code. Some of the basic examples are int, double , string, etc.

Data Structures on the other hand are a collection of data types. It is a way of organizing the items in terms of memory, and also the way of accessing each item through some defined logic. Some examples of data structures are stacks, queues, linked lists, binary tree and many more. I know this might be too much. Don't worry about them now, you do not need to deal with them initially.

Functions

A function is a contained block of code that can perform an action. For now you can remeber them as they are the "something" which can be used multiple times in a program and allows use to reuse the same piece of code instead of writing it again and again.

This was it? Write down in comments and let me know if it was helpful.