-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit e42a4a0
Showing
33 changed files
with
3,214 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
# Update these with your Supabase details from your project settings > API | ||
# https://app.supabase.com/project/_/settings/api | ||
NEXT_PUBLIC_SUPABASE_URL=your-project-url | ||
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
||
# dependencies | ||
/node_modules | ||
/.pnp | ||
.pnp.js | ||
.yarn/install-state.gz | ||
|
||
# testing | ||
/coverage | ||
|
||
# next.js | ||
/.next/ | ||
/out/ | ||
|
||
# production | ||
/build | ||
|
||
# misc | ||
.DS_Store | ||
*.pem | ||
|
||
# debug | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
|
||
# local env files | ||
.env*.local | ||
|
||
# vercel | ||
.vercel | ||
|
||
# typescript | ||
*.tsbuildinfo | ||
next-env.d.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
<a href="https://demo-nextjs-with-supabase.vercel.app/"> | ||
<img alt="Next.js and Supabase Starter Kit - the fastest way to build apps with Next.js and Supabase" src="https://demo-nextjs-with-supabase.vercel.app/opengraph-image.png"> | ||
<h1 align="center">Next.js and Supabase Starter Kit</h1> | ||
</a> | ||
|
||
<p align="center"> | ||
The fastest way to build apps with Next.js and Supabase | ||
</p> | ||
|
||
<p align="center"> | ||
<a href="#features"><strong>Features</strong></a> · | ||
<a href="#demo"><strong>Demo</strong></a> · | ||
<a href="#deploy-to-vercel"><strong>Deploy to Vercel</strong></a> · | ||
<a href="#clone-and-run-locally"><strong>Clone and run locally</strong></a> · | ||
<a href="#feedback-and-issues"><strong>Feedback and issues</strong></a> | ||
<a href="#more-supabase-examples"><strong>More Examples</strong></a> | ||
</p> | ||
<br/> | ||
|
||
## Features | ||
|
||
- Works across the entire [Next.js](https://nextjs.org) 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](https://tailwindcss.com) | ||
- Optional deployment with [Supabase Vercel Integration and Vercel deploy](#deploy-your-own) | ||
- Environment variables automatically assigned to Vercel project | ||
|
||
## Demo | ||
|
||
You can view a fully working demo at [demo-nextjs-with-supabase.vercel.app](https://demo-nextjs-with-supabase.vercel.app/). | ||
|
||
## Deploy to Vercel | ||
|
||
Vercel deployment will guide you through creating a Supabase account and project. | ||
|
||
After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning. | ||
|
||
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&project-name=nextjs-with-supabase&repository-name=nextjs-with-supabase&demo-title=nextjs-with-supabase&demo-description=This%20starter%20configures%20Supabase%20Auth%20to%20use%20cookies%2C%20making%20the%20user's%20session%20available%20throughout%20the%20entire%20Next.js%20app%20-%20Client%20Components%2C%20Server%20Components%2C%20Route%20Handlers%2C%20Server%20Actions%20and%20Middleware.&demo-url=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2F&external-id=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&demo-image=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2Fopengraph-image.png&integration-ids=oac_VqOgBHqhEoFTPzGkPd7L0iH6) | ||
|
||
The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally. | ||
|
||
If you wish to just develop locally and not deploy to Vercel, [follow the steps below](#clone-and-run-locally). | ||
|
||
## Clone and run locally | ||
|
||
1. You'll first need a Supabase project which can be made [via the Supabase dashboard](https://database.new) | ||
|
||
2. Create a Next.js app using the Supabase Starter template npx command | ||
|
||
```bash | ||
npx create-next-app -e with-supabase | ||
``` | ||
|
||
3. Use `cd` to change into the app's directory | ||
|
||
```bash | ||
cd name-of-new-app | ||
``` | ||
|
||
4. Rename `.env.local.example` to `.env.local` and update the following: | ||
|
||
``` | ||
NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL] | ||
NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY] | ||
``` | ||
|
||
Both `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` can be found in [your Supabase project's API settings](https://app.supabase.com/project/_/settings/api) | ||
|
||
5. You can now run the Next.js local development server: | ||
|
||
```bash | ||
npm run dev | ||
``` | ||
|
||
The starter kit should now be running on [localhost:3000](http://localhost:3000/). | ||
|
||
> Check out [the docs for Local Development](https://supabase.com/docs/guides/getting-started/local-development) to also run Supabase locally. | ||
## Feedback and issues | ||
|
||
Please file feedback and issues over on the [Supabase GitHub org](https://github.com/supabase/supabase/issues/new/choose). | ||
|
||
## More Supabase examples | ||
|
||
- [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments) | ||
- [Cookie-based Auth and the Next.js 13 App Router (free course)](https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF) | ||
- [Supabase Auth and the Next.js App Router](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { createClient } from "@/utils/supabase/server"; | ||
import { NextResponse } from "next/server"; | ||
|
||
export async function GET(request: Request) { | ||
// The `/auth/callback` route is required for the server-side auth flow implemented | ||
// by the SSR package. It exchanges an auth code for the user's session. | ||
// https://supabase.com/docs/guides/auth/server-side/nextjs | ||
const requestUrl = new URL(request.url); | ||
const code = requestUrl.searchParams.get("code"); | ||
const origin = requestUrl.origin; | ||
|
||
if (code) { | ||
const supabase = createClient(); | ||
await supabase.auth.exchangeCodeForSession(code); | ||
} | ||
|
||
// URL to redirect to after sign up process completes | ||
return NextResponse.redirect(`${origin}/protected`); | ||
} |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
@tailwind base; | ||
@tailwind components; | ||
@tailwind utilities; | ||
|
||
@layer base { | ||
:root { | ||
--background: 200 20% 98%; | ||
--btn-background: 200 10% 91%; | ||
--btn-background-hover: 200 10% 89%; | ||
--foreground: 200 50% 3%; | ||
} | ||
|
||
@media (prefers-color-scheme: dark) { | ||
:root { | ||
--background: 200 50% 3%; | ||
--btn-background: 200 10% 9%; | ||
--btn-background-hover: 200 10% 12%; | ||
--foreground: 200 20% 96%; | ||
} | ||
} | ||
} | ||
|
||
@layer base { | ||
* { | ||
@apply border-foreground/20; | ||
} | ||
} | ||
|
||
.animate-in { | ||
animation: animateIn 0.3s ease 0.15s both; | ||
} | ||
|
||
@keyframes animateIn { | ||
from { | ||
opacity: 0; | ||
transform: translateY(10px); | ||
} | ||
to { | ||
opacity: 1; | ||
transform: translateY(0); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import { GeistSans } from "geist/font/sans"; | ||
import "./globals.css"; | ||
|
||
const defaultUrl = process.env.VERCEL_URL | ||
? `https://${process.env.VERCEL_URL}` | ||
: "http://localhost:3000"; | ||
|
||
export const metadata = { | ||
metadataBase: new URL(defaultUrl), | ||
title: "Next.js and Supabase Starter Kit", | ||
description: "The fastest way to build apps with Next.js and Supabase", | ||
}; | ||
|
||
export default function RootLayout({ | ||
children, | ||
}: { | ||
children: React.ReactNode; | ||
}) { | ||
return ( | ||
<html lang="en" className={GeistSans.className}> | ||
<body className="bg-background text-foreground"> | ||
<main className="min-h-screen flex flex-col items-center"> | ||
{children} | ||
</main> | ||
</body> | ||
</html> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,119 @@ | ||
import Link from "next/link"; | ||
import { headers } from "next/headers"; | ||
import { createClient } from "@/utils/supabase/server"; | ||
import { redirect } from "next/navigation"; | ||
import { SubmitButton } from "./submit-button"; | ||
|
||
export default function Login({ | ||
searchParams, | ||
}: { | ||
searchParams: { message: string }; | ||
}) { | ||
const signIn = async (formData: FormData) => { | ||
"use server"; | ||
|
||
const email = formData.get("email") as string; | ||
const password = formData.get("password") as string; | ||
const supabase = createClient(); | ||
|
||
const { error } = await supabase.auth.signInWithPassword({ | ||
email, | ||
password, | ||
}); | ||
|
||
if (error) { | ||
return redirect("/login?message=Could not authenticate user"); | ||
} | ||
|
||
return redirect("/protected"); | ||
}; | ||
|
||
const signUp = async (formData: FormData) => { | ||
"use server"; | ||
|
||
const origin = headers().get("origin"); | ||
const email = formData.get("email") as string; | ||
const password = formData.get("password") as string; | ||
const supabase = createClient(); | ||
|
||
const { error } = await supabase.auth.signUp({ | ||
email, | ||
password, | ||
options: { | ||
emailRedirectTo: `${origin}/auth/callback`, | ||
}, | ||
}); | ||
|
||
if (error) { | ||
return redirect("/login?message=Could not authenticate user"); | ||
} | ||
|
||
return redirect("/login?message=Check email to continue sign in process"); | ||
}; | ||
|
||
return ( | ||
<div className="flex-1 flex flex-col w-full px-8 sm:max-w-md justify-center gap-2"> | ||
<Link | ||
href="/" | ||
className="absolute left-8 top-8 py-2 px-4 rounded-md no-underline text-foreground bg-btn-background hover:bg-btn-background-hover flex items-center group text-sm" | ||
> | ||
<svg | ||
xmlns="http://www.w3.org/2000/svg" | ||
width="24" | ||
height="24" | ||
viewBox="0 0 24 24" | ||
fill="none" | ||
stroke="currentColor" | ||
strokeWidth="2" | ||
strokeLinecap="round" | ||
strokeLinejoin="round" | ||
className="mr-2 h-4 w-4 transition-transform group-hover:-translate-x-1" | ||
> | ||
<polyline points="15 18 9 12 15 6" /> | ||
</svg>{" "} | ||
Back | ||
</Link> | ||
|
||
<form className="animate-in flex-1 flex flex-col w-full justify-center gap-2 text-foreground"> | ||
<label className="text-md" htmlFor="email"> | ||
</label> | ||
<input | ||
className="rounded-md px-4 py-2 bg-inherit border mb-6" | ||
name="email" | ||
placeholder="you@example.com" | ||
required | ||
/> | ||
<label className="text-md" htmlFor="password"> | ||
Password | ||
</label> | ||
<input | ||
className="rounded-md px-4 py-2 bg-inherit border mb-6" | ||
type="password" | ||
name="password" | ||
placeholder="••••••••" | ||
required | ||
/> | ||
<SubmitButton | ||
formAction={signIn} | ||
className="bg-green-700 rounded-md px-4 py-2 text-foreground mb-2" | ||
pendingText="Signing In..." | ||
> | ||
Sign In | ||
</SubmitButton> | ||
<SubmitButton | ||
formAction={signUp} | ||
className="border border-foreground/20 rounded-md px-4 py-2 text-foreground mb-2" | ||
pendingText="Signing Up..." | ||
> | ||
Sign Up | ||
</SubmitButton> | ||
{searchParams?.message && ( | ||
<p className="mt-4 p-4 bg-foreground/10 text-foreground text-center"> | ||
{searchParams.message} | ||
</p> | ||
)} | ||
</form> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
"use client"; | ||
|
||
import { useFormStatus } from "react-dom"; | ||
import { type ComponentProps } from "react"; | ||
|
||
type Props = ComponentProps<"button"> & { | ||
pendingText?: string; | ||
}; | ||
|
||
export function SubmitButton({ children, pendingText, ...props }: Props) { | ||
const { pending, action } = useFormStatus(); | ||
|
||
const isPending = pending && action === props.formAction; | ||
|
||
return ( | ||
<button {...props} type="submit" aria-disabled={pending}> | ||
{isPending ? pendingText : children} | ||
</button> | ||
); | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.