This project demonstrates setting up a Next.js application utilizing Prisma as an ORM, Supabase for authentication and real-time database functionalities, Shadcn for UI components and styling (with TailwindCSS), and Google Sign-Up for authentication. It also includes the use of the new supabase/ssr
package for creating Supabase clients optimized for Server-Side Rendering.
- Introduction
- Installation
- Usage
- Features
- Dependencies
- Configuration
- Examples
- Troubleshooting
- Contributors
- License
To get started with this project, follow these steps:
- Clone the repository.
- Install dependencies by running
npm install
. - Populate your
.env
file with necessary environment variables includingDATABASE_URL
,NEXT_PUBLIC_SUPABASE_URL
, andNEXT_PUBLIC_SUPABASE_ANON_KEY
.
- Initialize Prisma using
npx prisma init
. - Add your database model to
schema.prisma
and executenpx prisma db push
to sync your database.
- Set up a new Supabase project and add the URL and Anon Key to your
.env
file. - Install the Supabase CLI and generate types based on your schema with
npx supabase gen types typescript --project-id YOUR_PROJECT_ID
. - Update Email Templates in Supabase
To enhance the security and usability of your application, it's crucial to update your email templates in Supabase. This ensures that users are redirected to the new confirmation endpoint for various actions. Follow the instructions below to update the URLs in your email templates accordingly.
<h2>Confirm your signup</h2>
<p>Follow this link to confirm your user:</p>
<p>
<a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email">
Confirm your email
</a>
</p>
<h2>You have been invited</h2>
<p>
You have been invited to create a user on {{ .SiteURL }}. Follow this link to
accept the invite:
</p>
<p>
<a
href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=invite&next=/path-to-your-update-password-page"
>
Accept the invite
</a>
</p>
<h2>Magic Link</h2>
<p>Follow this link to login:</p>
<p>
<a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=magiclink">
Log In
</a>
</p>
<h2>Confirm Change of Email</h2>
<p>Follow this link to confirm the update of your email from {{ .Email }} to {{ .NewEmail }}:</p>
<p>
<a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email_change">
Change Email
</a>
</p>
<h2>Reset Password</h2>
<p>Follow this link to reset the password for your user:</p>
<p>
<a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next=/path-to-your-update-password-page">
Reset Password
</a>
</p>
- Initialize Shadcn with
npx shadcn-ui@latest init
following the on-screen instructions. - To install all Shadcn components, run
npx shadcn-ui@latest add
.
Utilize the supabase/ssr
package for creating Supabase clients. This involves setting up client, middleware, and server utilities under the utils/supabase
directory.
- Client:
utils/supabase/client.ts
- Middleware:
utils/supabase/middleware.ts
- Server:
utils/supabase/server.ts
Implement sign up, sign in, and sign out functionalities using Supabase's authentication features, including Google Sign-Up.
- Works across the entire Next.js stack
- App Router
- Pages Router
- Middleware
- Client
- Server
- It just works!
- supabase-ssr. A package to configure Supabase Auth to use cookies
- Styling with Tailwind CSS
- Prisma ORM for simplified database querying.
- Supabase for real-time database and authentication.
- Shadcn for sleek UI components and styling.
- Integration with Google Sign-Up for an additional authentication method.
- Supabase SSR for optimized server-side Supabase client creation.
- Next.js
- Prisma
- Supabase
- Shadcn
- @supabase/auth-helpers-nextjs
- next-themes
- supabase/ssr
Key configurations involve setting up the .env
file and customizing the schema.prisma
for your database models.
A basic usage example is described in the Usage section.
For any issues encountered during setup or usage, refer to the official documentation of the technologies used.
Feel free to contribute to this project. Any help is welcomed!
This project is licensed under the MIT License. For more details, see the LICENSE
file.
For the source code and latest updates, visit the official Supabase GitHub repository: "Supabase Github"
This project setup was inspired by and based on the blog post: "Setting up a Next.js project with Prisma". For a detailed guide and additional context, check out this resource.