DEV Community: Vidit Shah

Creating Webhook between Clerk and DynamoDB

Vidit Shah — Wed, 13 Mar 2024 18:11:48 +0000

The Whole Motive behind this blog is Auth is hard and a bit of pain to set up in AWS Cognito.With All Due AWS Cognito is a great service but has a learning curve.

So, lets learn how to integrate all this stack together

The common assumption you have a Nextjs Project clerk ready and a Users table in DynamoDB in your specific region

I have Users Table deployed with Partition key as ClerkID

So first let's get started with our nextjs Project

Folder Structure lib->actions->user.action.ts

"use server";
import { DynamoDBClient, PutItemCommand } from "@aws-sdk/client-dynamodb";
import { marshall } from "@aws-sdk/util-dynamodb";

export const createUser = async ({
  clerkId,
  name,
  username,
  email,
  picture,
}: {
  clerkId: string;
  name: string;
  username: string;
  email: string;
  picture: string;
}) => {
  const ddbClient = new DynamoDBClient({
    region: process.env.AWS_REGION as string,
    credentials: {
      accessKeyId: process.env.AWS_ACCESS_KEY_ID as string,
      secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY as string,
    },
  });
  const params = {
    TableName: "Users",
    Item: marshall({
      ClerkID: clerkId,
      Name: name,
      Username: username,
      Email: email,
      Picture: picture,
    }),
  };

  try {
    await ddbClient.send(new PutItemCommand(params));
  } catch (err) {
    throw err;
  }
};

As you see this code runs on server so lets update our next config too

next.config.mjs

const nextConfig = {
  experimental: {
    mdxRs: true,
    serverComponentsExternalPackages: [
      "@aws-sdk/client-dynamodb",
      "@aws-sdk/util-dynamodb",
    ],
  }
}

Now the API Post route in your app directory

This all is explained in the Documentation for clerk

Webhook Clerk documentation

Now in our App Directory
app->api->webhook->route.ts

/* eslint-disable camelcase */
import { Webhook } from "svix";
import { headers } from "next/headers";
import { WebhookEvent } from "@clerk/nextjs/server";
import { createUser } from "@/lib/actions/user.action";
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  // You can find this in the Clerk Dashboard -> Webhooks -> choose the webhook
  //
  const WEBHOOK_SECRET = process.env.NEXT_CLERK_WEBHOOK_SECRET;

  if (!WEBHOOK_SECRET) {
    throw new Error(
      "Please add WEBHOOK_SECRET from Clerk Dashboard to .env or .env.local"
    );
  }

  // Get the headers
  const headerPayload = headers();
  const svix_id = headerPayload.get("svix-id");
  const svix_timestamp = headerPayload.get("svix-timestamp");
  const svix_signature = headerPayload.get("svix-signature");

  // If there are no headers, error out
  if (!svix_id || !svix_timestamp || !svix_signature) {
    return new Response("Error occured -- no svix headers", {
      status: 400,
    });
  }

  // Get the body
  const payload = await req.json();
  const body = JSON.stringify(payload);

  // Create a new SVIX instance with your secret.
  const wh = new Webhook(WEBHOOK_SECRET);

  let evt: WebhookEvent;

  // Verify the payload with the headers
  try {
    evt = wh.verify(body, {
      "svix-id": svix_id,
      "svix-timestamp": svix_timestamp,
      "svix-signature": svix_signature,
    }) as WebhookEvent;
  } catch (err) {
    console.error("Error verifying webhook:", err);
    return new Response("Error occured", {
      status: 400,
    });
  }

  const eventType = evt.type;

  console.log({ eventType });
  // write this block by yourself
  try {
    // ... (existing code)

    if (eventType === "user.created") {
      const {
        id,
        email_addresses,
        image_url,
        username,
        first_name,
        last_name,
      } = evt.data;

      try {
        console.log("Creating user...");
        const user = await createUser({
          clerkId: id,
          name: `${first_name}${last_name ? ` ${last_name}` : ""}`,
          username: username!,
          email: email_addresses[0].email_address,
          picture: image_url,
        });
        return NextResponse.json({ message: "OK", user: user });
      } catch (err) {
        console.error("Error creating user:", err);
        return new Response("Error creating user", { status: 500 });
      }
    }

    return new Response("", { status: 201 });
  } catch (err) {
    console.error("Error in API route:", err);
    return new Response("Internal Server Error", { status: 500 });
  }
}

Deploy your website to Vercel or any other provider add your webhook endpoint of the deployed website to the environment variables here are images to do so
eg : www.example.com/api/webhook

Make sure you add NEXT_CLERK_WEBHOOK_SECRET in your .env.local

Here what .env.local should look like when deployed

Taddaa you are all set

Setting Up Auth using AWS-CDK, Cognito, NextJs 14, and AWS Amplify v6

Vidit Shah — Wed, 17 Jan 2024 18:59:48 +0000

Welcome to this blog we'll learn how to set up using AmplifyV6

We'll deploy our backend using aws-cdk
We'll deploy our frontend (Next 14) on aws amplify hosting

If you feel lost with the steps or code do check out the GitHub repo

Only authenticated users are greeted!
Live App

The Complete code for this blog is available here :

Github Code

So let's get Started

Create a parent folder initialize git init and add a .gitignore file

take auth-cognito

Add the following in the .gitignore file

**/node_modules/
**/.env
**/.env.local

now let's start building our backend

Backend

let's initialize our CDK project backend

take backend in your terminal

cdk init app . --language=typescript in your terminal

let's remove the git to avoid conflicts with our monorepo

rm -rf .git [works on linux and mac]

Now run cdk bootstrap in your terminal

Now Let's create a handy script to synthesize and deploy our cdk application in package.json

"deploy": "cdk synth && cdk deploy --all"

now rename your lib folder to stacks and create
auth.stack.ts in your stacks folder

Let's create our user pool and user pool client

import * as cdk from "aws-cdk-lib";
import { Construct } from "constructs";
import { aws_cognito as Cognito } from "aws-cdk-lib";
import * as iam from "aws-cdk-lib/aws-iam";

interface authStackProps extends cdk.StackProps {}

export class AuthStack extends cdk.Stack {
  public readonly userPool: Cognito.UserPool;
  public readonly userPoolClient: Cognito.UserPoolClient;

  constructor(scope: Construct, id: string, props?: authStackProps) {
    super(scope, id, props);
    this.userPool = this.createUserPool();
    this.userPoolClient = this.createWebClient();
    this.output();
  }

  createUserPool(props?: authStackProps) {
    const userPool = new Cognito.UserPool(this, "UserPool", {
      userPoolName: "UserPool",
      selfSignUpEnabled: true,
      autoVerify: {
        email: true,
      },
      passwordPolicy: {
        minLength: 8,
        requireLowercase: false,
        requireUppercase: false,
        requireDigits: false,
        requireSymbols: false,
      },
      signInAliases: {
        email: true,
      },
      standardAttributes: {
        email: {
          required: true,
          mutable: true,
        },
      },
      customAttributes: {
        name: new Cognito.StringAttribute({
          minLen: 3,
          maxLen: 20,
        }),
      },
    });
    return userPool;
  }

  createWebClient() {
    const userPoolClient = new Cognito.UserPoolClient(
      this,
      "UserPoolClient",
      {
        userPool: this.userPool,
        authFlows: {
          userPassword: true,
          userSrp: true,
        },
      }
    );
    return userPoolClient;
  }

  output() {
    new cdk.CfnOutput(this, "UserPoolId", {
      value: this.userPool.userPoolId,
    });
    new cdk.CfnOutput(this, "UserPoolClientId", {
      value: this.userPoolClient.userPoolClientId,
    });
  }
}

Now lets this stack to our bin and deploy

#!/usr/bin/env node
import "source-map-support/register";
import * as cdk from "aws-cdk-lib";
import { AuthStack } from "../stacks/auth-stack";

const app = new cdk.App();
const authStack = new AuthStack(app, "AuthStack");

take npm run deploy

Don't forget to note down the values from the UserPool and UserPool Client

Frontend

All the code can be found under the frontend folder of repo
FrontEnd

Now let's start building our frontend you can clone the repo and run cd frontend && npm init

create .env.local file and add your Userpool and UserpoolClient Values

NEXT_PUBLIC_USER_POOL_ID=<USER_POOL_ID>
NEXT_PUBLIC_USER_POOL_CLIENT_ID=<USER_POOL_CLIENT_ID>

Configuring Amplify on ServerSide

create a folder utils and create amplifyServerUtils.ts

this file exports runWithAmplifyServerContext with our config object in it

import { createServerRunner } from "@aws-amplify/adapter-nextjs";
import { ResourcesConfig, AuthConfig } from "@aws-amplify/core";

const config: ResourcesConfig = {
  Auth: {
    Cognito: {
      userPoolId: process.env.NEXT_PUBLIC_USER_POOL_ID as string,
      userPoolClientId: process.env.NEXT_PUBLIC_USER_POOL_CLIENT_ID as string,
      signUpVerificationMethod: "code",
    },
  },
};
export const { runWithAmplifyServerContext } = createServerRunner({
  config,
});

Let's dive into setting up our protected routes in the root of the folder you'll find
middleware.ts

The middleware function takes care of all the request-response and cors

export const config = {
  matcher: ["/"],
}

this line protects our home route

the authenticated function checks whether the User is authenticated if the user is not authenticated we redirect the user signup, try it yourself

return NextResponse.redirect(new URL("/signup", request.url));

Now let's work to configure AWS to amplify the Client Side

if you see the ConfigureAmplifyClientSide.ts

The steps are pretty much the same but we will be adding into our root layout

RootLayout

Hosting

Make sure you've uploaded your mono repo on Github

Go to AWS Amplify and select hosting
Select GitHub and Grant Permission

have a look at how to work with a mono-repo

Now click on advance settings and add your environment Variables

Make sure you add this custom image value

_CUSTOM_IMAGE=amplify:al2023
NEXT_PUBLIC_USER_POOL_ID=<YOUR VALUES>
NEXT_PUBLIC_USER_POOL_CLIENT_ID=<YOUR VALUE>

And Tadddaa We're done

If you Like to learn about dynamo DB :Click here

If you like to learn about cognito :Click here

Connect on X/Twitter = Follow here