Secure SSR pages and APIs with Clerk.dev

One-liner

This video tutorial demonstrates how to secure server-side rendered (SSR) pages and APIs in a Next.js application using Clerk.dev, by adding authentication to protect the routes and ensuring only logged-in users can access them.

Synopsis

Initial Setup with Clerk

The video begins by offering insight into how Clerk can be used to add security to SSR pages and API routes in a Next.js application. The instructor assumes that the viewers are familiar with the initial setup of Clerk, for which they provide a link to another video.

Protecting Routes

The instructor discusses creating 'Sign in' and 'Sign up' components, and how to organize them into folders corresponding to the routes they represent. They show the code required for creating dynamic routes in Next.js using file-based routing patterns.

Server-Side Authentication

The instructor moves on to explain the use of withServerSideAuth from Clerk for server-side pages. The function is used to wrap the usual getServerSideProps which performs an asynchronous operation to check for a session ID in the request object. If there is no session ID, it means the user isn't authenticated, and they're redirected to the sign-in page with the intended destination saved for post-login navigation.

API Protection with Clerk

The final segment explains how to secure API routes using the requireAuth middleware from Clerk. This ensures that all requests to the API are authenticated, returning a 401 unauthorized error if the user is not logged in. The protected API route is demonstrated to fetch and display cat facts dynamically when a button on the UI is clicked.

Key quotes

  1. "SSR with NextJS and the ability to have APIs in my application are some of my favorite features of Next."
  2. "We're going to want to catch all for sign up and sign in."
  3. "With server-side auth gives us the ability to do certain things."
  4. "Cats and kittens should be acquired in pairs whenever possible as cat families interact best in learn."
  5. "Immediately they get a 401 unauthenticated."

Make it stick

  1. Remember, to protect your SSR pages, wrap your getServerSideProps with Clerk's withServerSideAuth.
  2. To protect API routes in Next.js, use requireAuth from Clerk, enforcing user authentication for API access.
  3. A neat button code snippet for fetching data upon click: async function () { const results = await fetch('/api/route'); setFact(await results.json()); }.

Talking points

  1. Did you know that using Clerk.dev with Next.js allows you to secure both your SSR pages and API routes with just a few lines of code?
  2. What are your thoughts on how the redirection is managed for unauthenticated users trying to access secured pages?
  3. I found it interesting how one can secure an API endpoint and ensure only logged-in users can fetch data, as shown with the cat facts example
This summary contains AI-generated information and may have important inaccuracies or omissions.

Try It Yourself

This summary was generated using nuggetize.com. Use it to summarize long videos, news stories, and more with AI.