{"id":27969654,"url":"https://github.com/ameghcoder/supabase-and-nextjs-authentication","last_synced_at":"2026-05-10T19:02:02.947Z","repository":{"id":291814821,"uuid":"978874263","full_name":"ameghcoder/Supabase-and-Nextjs-Authentication","owner":"ameghcoder","description":"A ready-to-use authentication template built with Supabase Auth and Next.js App Router. Designed for quick project kickstarts—just clone the repo, update the Supabase credentials, and you're ready to go!","archived":false,"fork":false,"pushed_at":"2025-05-07T16:46:41.000Z","size":80739,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-07T21:49:48.187Z","etag":null,"topics":["authentication","authentication-middleware","nextjs","supabase","supabase-auth","supabase-client"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ameghcoder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-06T16:32:03.000Z","updated_at":"2025-05-07T16:46:59.000Z","dependencies_parsed_at":"2025-05-06T17:57:14.659Z","dependency_job_id":null,"html_url":"https://github.com/ameghcoder/Supabase-and-Nextjs-Authentication","commit_stats":null,"previous_names":["ameghcoder/supabase-and-nextjs-authentication"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ameghcoder%2FSupabase-and-Nextjs-Authentication","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ameghcoder%2FSupabase-and-Nextjs-Authentication/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ameghcoder%2FSupabase-and-Nextjs-Authentication/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ameghcoder%2FSupabase-and-Nextjs-Authentication/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ameghcoder","download_url":"https://codeload.github.com/ameghcoder/Supabase-and-Nextjs-Authentication/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252961858,"owners_count":21832193,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","authentication-middleware","nextjs","supabase","supabase-auth","supabase-client"],"created_at":"2025-05-07T21:49:51.717Z","updated_at":"2026-05-10T19:02:02.935Z","avatar_url":"https://github.com/ameghcoder.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# 🔐 Supabase + Next.js Authentication Template\n\nA ready-to-use authentication template built with **Supabase Auth** and **Next.js App Router**. Designed for quick project kickstarts—just clone the repo, update the Supabase credentials, and you're ready to go!\n\nThis template includes:\n\n- ✅ Email/password sign up \u0026 login\n- 🔁 Forgot/reset password functionality\n- 📩 Email verification handling via Supabase\n- 🔄 Redirect pages for confirm/reset actions\n- 🧰 Clean, reusable authentication components using **ShadCN UI**\n- ⚡ Built with Next.js App Router\n- Future Updates - Login with Social Media\n \n---\n\n## 🚀 Getting Started\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/ameghcoder/auth-using-supabase-nextjs.git\ncd your-repo-name\n```\n\n### 2. Install Dependencies\n\n```bash\nnpm install\n# or\nyarn\n```\n\n### 3. Create a Supabase Project\n\n1. Go to [https://supabase.com](https://supabase.com)\n2. Click **\"New Project\"**\n3. Set up your database (choose region, password, etc.)\n4. Once created, go to **Settings → API**\n\nCopy the following values:\n\n- `SUPABASE_URL`\n- `SUPABASE_ANON_KEY`\n- `SUPABASE_SERVICE_ROLE_KEY`\n\n### 4. Configure Environment Variables\n\nCreate a `.env.local` file in the root of your project and add:\n\n```env.local\nNEXT_PUBLIC_SUPABASE_URL=your_supabase_url\nNEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key\nSUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key\n\n```\n\n### 5. Run the Development Server\n\n```bash\nnpm run dev\n```\n\n---\n\n### 6. Remember to do this\n\n### (i). *Create a single table called \"user_profile\" for making your authentication production ready. For using this template you also need to create a table \"user_profile\" where you need to add three columns necessary, (you can add more but these three are necessary to create)*\n\n- id\n- email\n- is_verified\n\nHere is the SQL code to create the table in public schema -\n\n```sql\ncreate table public.user_profile (\n  id uuid not null default auth.uid (),\n  email text not null,\n  is_verified boolean null default false,\n  created_at timestamp with time zone not null default now(),\n  updated_at timestamp with time zone null,\n  constraint user_profile_pkey primary key (id),\n  constraint user_profile_email_key unique (email),\n  constraint user_profile_id_fkey foreign KEY (id) references auth.users (id)\n) TABLESPACE pg_default;\n```\n\nAfter that you need to enable the RLS policy and add policies for CRUD operation.\nHere is the screenshot of all policies that you need to create with the Target Roles.\n\n![RLS policies for user_profile table](./public/preview/rls-policies-for-user_profile.png)\n\nYou can modify the roles for each policy based on your use.\n\n### (ii). *Last and final step before using the Authentication, you need to change the email template to support a server-side authentication flow.*\n\nFor doing so, Go to the Auth templates page in your dashboard. In the Confirm signup template, change \u003cspan style=\"color:lime;\"\u003e*{{ .ConfirmationURL }} to {{ .SiteURL }}/auth/verify?token_hash={{ .TokenHash }}\u0026type=signup*\u003c/span\u003e here is the path to find this template code\n\nFirst go to your project \u003e click on authentication \u003e then click on Emails.\n\nHere you will find out many email templates, but you only need to focus on **Confirm signup** and **Reset Password**, change their url as shown in the following image.\n\n## For Confirm Signup Template*\n\n- Change this *{{ .ConfirmationURL }}* to this *{{ .SiteURL }}/auth/verify?token_hash={{ .TokenHash }}\u0026type=signup*\n![Confirm Your Signup Template](./public/preview/confirm-your-signup.png)\n\n## For Reset Password Template\n\n- Change this *{{ .ConfirmationURL }}* to this *{{ .SiteURL }}/auth/verify?token_hash={{ .TokenHash }}\u0026type=recovery*\n![Reset Password Template](./public/preview/reset-your-password.png)\n\n\u003e Note: Above task is necessary otherwise your verification email link and reset password link is not working properly\n\nNow here your Authentication setup for Next.js using Supabase is completed now you can run this project and\n\n- Go to [http://localhost:3000/auth/signup](http://localhost:3000/auth/signup) page for register a new user\n- Go to [http://localhost:3000/auth/login](http://localhost:3000/auth/login) page for login with new user\n- Also you can reset your password if you forgot simply click on the Forgot Password link in login page, then enter your email and get a password reset verification link and after click on the link you will redirected to the localhost:3000/auth/verify page and able to set new password.\n\n\u003e Note: You can signup and verify your email in different browsers.\n\n---\n\n## 📁 Features Overview\n\n### 🔐 Authentication Pages\n\n- `/auth/login` – Login with email and password\n- `/auth/signup` – Create a new account\n- `/auth/login` - Contains a button for forgot-password that opens a pop us to reset password\n- `/auth/login` \u0026 `/auth/signup` - Contains a button for Resend Confirmation link, if someone miss of forgot to verify email, that opens a pop us to send verification email\n\n### 📩 Supabase Redirect Pages\n\n- `/auth/verify` – Handles email confirmation from Supabase and detect the redirection type if,\n- type 'signup' - then shows a email confirmation popup\n- type 'recovery' - then shows a Set New Password dialog\n\nThese routes automatically capture Supabase redirect parameters and handle the logic for you.\n\n---\n\n## 📦 Built With\n\n- [Next.js 15+ (App Router)](https://nextjs.org/docs/app)\n- [Supabase](https://supabase.com)\n- [ShadCN UI Components](https://ui.shadcn.com)\n- [Tailwind CSS](https://tailwindcss.com/)\n\n---\n\n## 🔧 Future Usage\n\nUse this repo as a starting point for any new project that requires authentication. It handles the full email auth lifecycle so you can focus on building your core app logic.\n\nTo start a new project:\n\n1. Clone this repo\n2. Replace Supabase credentials\n3. Rename the project directory\n4. Start coding 🚀\n\n## Future Update\n\nI will also include some other method for login like Google, LinkedIn and other social media also. Or you can also contribute in this repo. Star this repo if you find it helpful.\n\n---\n\n## 📄 License\n\nThis project is licensed under the MIT License – feel free to use it for personal or commercial projects.\nSee the [LICENSE](./LICENSE.txt) file for details.\n\n---\n\n## 🧑‍💻 Author\n\nBuilt by [Yashraj](https://github.com/ameghcoder)  \nMy [LinkedIn Profile](https://linkedin.com/in/yrjdeveloper)\nFeel free to connect and contribute!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fameghcoder%2Fsupabase-and-nextjs-authentication","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fameghcoder%2Fsupabase-and-nextjs-authentication","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fameghcoder%2Fsupabase-and-nextjs-authentication/lists"}