Posted on Oct 23 Authentication is a critical aspect of many web applications, and it can sometimes be a complex task. In this article, I will walk you through the process of implementing Supabase Auth in a NextJS 13 application while using Prisma for database interaction. I'll provide step-by-step instructions and explanations to help you understand the entire process.If you want to skip the tutorial and jump right in the action, you can find the code here.Supabase Auth is a powerful package that simplifies authentication in your web applications. However, it manages the user table in a database schema called auth, while Prisma typically uses the public schema. This difference makes it challenging to establish foreign key relations between your tables and the auth.users table. To address this issue, you might consider using Prisma's preview feature called multiSchema. But this approach has its drawbacks, such as pulling unnecessary tables and potential structural changes by Supabase in the future.To overcome these challenges, we will be creating a custom profile table and we will use database triggers. This approach allows us to manage user data efficiently while maintaining a flexible and scalable architecture.Here is a diagram of the implementation:Adding user auth to the application using supabase is pretty easy. We just use the supabase-js library, and we call a method to sign-in or sign-up. After that, supabase will handle everything:In order to use the user in prisma, we will create a database trigger that will listen for inserts into auth.users and create an entry in our profile table. In reverse, when we want to delete a user, we will have a trigger on profile to delete the corresponding record from auth.users.Before we dive into the technical details, let's start by creating a new Next.js project. At the time of writing this article, Next.js had version 13.5.5. Begin by setting up your project using the following command:For a successful integration with Supabase, you need to create a Supabase project and collect three essential environment variables. These variables will enable your Next.js application to communicate with Supabase.From SETTINGS -> API: NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.From SETTINGS -> DATABASE -> Connection string -> nodejs: DATABASE_URL.Also, from the settings, disable email confirmation in order to make our login process easier for the purpose of this tutorial:Don't worry, the same login flow will work for Github, Google or any other provider you choose.To use Prisma in your project, you need to install it and configure the database connection. Here's the step-by-step process:Then, as discussed in the diagram above, we need some DB triggers. Since we don't want to give prisma access to the auth schema, because we will need to pull all the tables ( and supabase has a lot of them), we will use another library to add our trigers.Run the migration using npm run migrate-dev and provide a name (e.g., "init") to create the tables in Supabase and add your triggers. After that, we can check supabase to see if the tables were created.Another thing that you will need to do is for each table that is created, manually enable RLS:Create a file called lib/db.ts and include the following code to set up your Prisma connection.We will use this later on an admin page to get the profile of the user in order to see if he has the right role. Next, let's setup supabase login.We will now configure Supabase authentication in our Next.js application. This part is inspired by the official Supabase documentation, which you can find here. You can also watch a video tutorial by Jon Meyers at the following link.Create a middleware.ts file in the root of your project to configure Supabase middleware.In your app/auth/callback/route.ts, set up the code exchange route.Now, let's create client components to interact with Supabase for authentication. You could also create server components instead, as explained in the supabase docs.Now, let's set up the pages of our application, starting with the home page.After you add this code, the / route cannot be accessed anymore. If you try going to it, you will be redirected to /login. But we don't have that page yet, so you will see a 404 error.Now, if you go to the login page, and sign-up, you will be redirected to / and you will be able to see your session.The last thing we are going to implement is an admin route. This one is pretty similar with the root page, with just an extra check.All we need to do is just get the profile based on the supabase user id, and check the role. Pretty easy right? :DIn order to go to this page, in supabase dashboard, change your role to admin.In this guide, we learned the process of implementing Supabase Auth in a Next13 application while using Prisma for database interaction. We've covered the challenges of combining these technologies and provided solutions to create a flexible and efficient authentication system. With Supabase and Prisma, you can build robust web applications with ease.And that's it. 🎉🎉🎉If you have any questions, feel free to reach up in the comments section.Code available on GitHub.Templates 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 Donna Brown - Sep 6 Alexander Garcia - Sep 5 Rupadana - Sep 28 gourab yousuf basir - Sep 28 Once suspended, mihaiandrei97 will not be able to comment or publish posts until their suspension is removed. Once unsuspended, mihaiandrei97 will be able to comment and publish posts again. Once unpublished, all posts by mihaiandrei97 will become hidden and only accessible to themselves. If mihaiandrei97 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 Mihai-Adrian Andrei. 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 mihaiandrei97: mihaiandrei97 consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging mihaiandrei97 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.