Authentication

Combining Clerk and Supabase for User Authentication

ZapStart uses Clerk for user authentication in combination with Supabase for managing the backend database. We chose Clerk because it offers a complete solution for user management, including secure authentication, social logins, and an easy-to-use API. Combining Clerk with Supabase ensures that you can efficiently manage user data, while leveraging Supabase's database capabilities to store additional information about users, making it both scalable and efficient.

Getting Started with Clerk

To get started with Clerk, you’ll need to create an account on the Clerk website. Once logged in, follow these steps:

1. Create a new application in Clerk's dashboard.
2. Navigate to the API Keys section to find your API keys and frontend key.

Add your Clerk and Supabase keys to your project

Once you have your API keys, update your .env.local file with the necessary keys to integrate Clerk with your ZapStart project:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your-frontend-key
CLERK_SECRET_KEY=your-api-secret-key
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

Managing User Data

After setting up Clerk and Supabase, ZapStart provides a ready-made supabaseAdmin.ts file to help you manage user sessions and data. Clerk handles the authentication (sign-ups, logins, social logins), while Supabase manages and stores additional user data like user profiles, preferences, or roles. Supabase also comes in handy for checking if a user has bought a product or has access to certain features.

Here's an example of a custom hook that inserts user data into Supabase when a user signs in:

'use client'

import { createClient } from "@supabase/supabase-js"
import { useSession } from "@clerk/nextjs"

  const InsertUser = () => {
  const { isSignedIn } = useSession()
  const { user } = useUser()

  useEffect(() => {
    const insertUserToSupabase = async () => {
      if (isSignedIn && user) {
        const hasInsertedUser = localStorage.getItem("hasInsertedUser")

        if (!hasInsertedUser) {
          const { id, primaryEmailAddress } = user
          const { data, error } = await supabaseAdmin
            .from("users")
            .upsert({ id: id, email: primaryEmailAddress?.emailAddress })

          if (error) {
            console.error("Error inserting user into Supabase:", error.message)
          } else {
            console.log("User inserted/updated successfully:", data)
            localStorage.setItem("hasInsertedUser", "true")
          }
        }
      }
    }

    insertUserToSupabase()
  }, [isSignedIn, user])

  return null
}

Conclusion: Clerk and Supabase

Clerk manages user sessions, authentication, and secure access to your application. However, Supabase is perfect for storing additional data related to your users, such as profile information, user roles, and preferences. Together, Clerk and Supabase create a full-stack authentication and user management solution that is easy to implement and scales with your project.

If you'd prefer to use a different authentication provider, adjustments to the authentication logic will be required, but Clerk and Supabase are well integrated to streamline the process.