From 03ce12a4918b804b9668132646599cd118ce3c18 Mon Sep 17 00:00:00 2001 From: Francesco Sansalvadore Date: Fri, 23 Jun 2023 22:24:14 +0200 Subject: [PATCH 1/4] update with-supabase example --- examples/with-supabase/app/globals.css | 49 ++-- examples/with-supabase/app/layout.tsx | 2 +- examples/with-supabase/app/login/page.tsx | 55 ++-- examples/with-supabase/app/page.tsx | 260 ++++++++++-------- .../LogoutButton.tsx} | 4 +- .../with-supabase/components/NextJsLogo.tsx | 16 ++ .../with-supabase/components/SupabaseLogo.tsx | 39 +++ examples/with-supabase/package.json | 1 - examples/with-supabase/public/book.svg | 1 - examples/with-supabase/public/code.svg | 1 - examples/with-supabase/public/next.svg | 1 - examples/with-supabase/public/supabase.svg | 1 - examples/with-supabase/public/vercel.svg | 1 - examples/with-supabase/public/youtube.svg | 1 - examples/with-supabase/tailwind.config.js | 11 +- 15 files changed, 277 insertions(+), 166 deletions(-) rename examples/with-supabase/{app/logout-button.tsx => components/LogoutButton.tsx} (74%) create mode 100644 examples/with-supabase/components/NextJsLogo.tsx create mode 100644 examples/with-supabase/components/SupabaseLogo.tsx delete mode 100644 examples/with-supabase/public/book.svg delete mode 100644 examples/with-supabase/public/code.svg delete mode 100644 examples/with-supabase/public/next.svg delete mode 100644 examples/with-supabase/public/supabase.svg delete mode 100644 examples/with-supabase/public/vercel.svg delete mode 100644 examples/with-supabase/public/youtube.svg diff --git a/examples/with-supabase/app/globals.css b/examples/with-supabase/app/globals.css index fd81e885836d..cdcc9e8bc361 100644 --- a/examples/with-supabase/app/globals.css +++ b/examples/with-supabase/app/globals.css @@ -2,26 +2,41 @@ @tailwind components; @tailwind utilities; -:root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; +@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%; + } + } } -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; +@layer base { + * { + @apply border-foreground/20; } } -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); +.animate-in { + animation: animateIn 0.3s ease 0.15s both; } + +@keyframes animateIn { + from { + opacity: 0; + transform: translateY(10px) + } + to { + opacity: 1; + transform: translateY(0) + } +} \ No newline at end of file diff --git a/examples/with-supabase/app/layout.tsx b/examples/with-supabase/app/layout.tsx index 9e9dbfcfaa3d..2e8ec03b4740 100644 --- a/examples/with-supabase/app/layout.tsx +++ b/examples/with-supabase/app/layout.tsx @@ -13,7 +13,7 @@ export default function RootLayout({ return ( -
+
{children}
diff --git a/examples/with-supabase/app/login/page.tsx b/examples/with-supabase/app/login/page.tsx index c56d13e77bd8..e9b7744e408e 100644 --- a/examples/with-supabase/app/login/page.tsx +++ b/examples/with-supabase/app/login/page.tsx @@ -3,6 +3,7 @@ import { useState } from 'react' import { useRouter } from 'next/navigation' import { createClientComponentClient } from '@supabase/auth-helpers-nextjs' +import Link from 'next/link' export default function Login() { const [email, setEmail] = useState('') @@ -30,73 +31,89 @@ export default function Login() { password, }) router.push('/') + router.refresh() } return ( -
+
+ + + + Back + {view === 'check-email' ? ( -

- Check {email} to - continue signing up +

+ Check {email} to continue signing up

) : (
-
diff --git a/examples/with-supabase/app/page.tsx b/examples/with-supabase/app/page.tsx index dd2a7d91c1c1..00eba68953dd 100644 --- a/examples/with-supabase/app/page.tsx +++ b/examples/with-supabase/app/page.tsx @@ -1,8 +1,142 @@ import { createServerComponentClient } from '@supabase/auth-helpers-nextjs' import { cookies } from 'next/headers' -import Image from 'next/image' import Link from 'next/link' -import LogoutButton from './logout-button' +import LogoutButton from '../components/LogoutButton' +import SupabaseLogo from '../components/SupabaseLogo' +import NextJsLogo from '../components/NextJsLogo' + +export default async function Index() { + const supabase = createServerComponentClient({ cookies }) + + const { + data: { user }, + } = await supabase.auth.getUser() + + return ( +
+ + +
+
+
+ + + + + +
+

Supabase and Next.js Starter Template

+

+ The fastest way to start building apps with{' '} + Supabase and Next.js +

+
+ Get started by editing app/page.tsx +
+
+ +
+ +
+

+ Everything you need to get started +

+
+ {resources.map(({ title, subtitle, url, icon }) => ( + +

+ {title} +

+
+

{subtitle}

+
+ + + + + + + +
+
+ + ))} +
+
+ +
+
+

+ Examples +

+

+ Look in the _examples folder to see how to create a + Supabase client in all the different contexts. +

+
+
+ {examples.map(({ type, src }) => ( +
+
+ {type} +
+
+ {src} +
+
+ ))} +
+
+ +
+

Powered by + Supabase +

+
+ +
+
+ ) +} const resources = [ { @@ -10,24 +144,25 @@ const resources = [ subtitle: 'This free course by Jon Meyers, shows you how to configure Supabase Auth to use cookies, and steps through some common patterns.', url: 'https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF', - icon: 'youtube', + icon: 'M7 4V20M17 4V20M3 8H7M17 8H21M3 12H21M3 16H7M17 16H21M4 20H20C20.5523 20 21 19.5523 21 19V5C21 4.44772 20.5523 4 20 4H4C3.44772 4 3 4.44772 3 5V19C3 19.5523 3.44772 20 4 20Z', }, { title: 'Supabase Next.js App Router Example', subtitle: 'Want to see a code example containing some common patterns with Next.js and Supabase? Check out this repo!', url: 'https://github.com/supabase/supabase/tree/master/examples/auth/nextjs', - icon: 'code', + icon: 'M10 20L14 4M18 8L22 12L18 16M6 16L2 12L6 8', }, { title: 'Supabase Auth Helpers Docs', subtitle: 'This template has configured Supabase Auth to use cookies for you, but the docs are a great place to learn more.', url: 'https://supabase.com/docs/guides/auth/auth-helpers/nextjs', - icon: 'book', + icon: 'M12 6.25278V19.2528M12 6.25278C10.8321 5.47686 9.24649 5 7.5 5C5.75351 5 4.16789 5.47686 3 6.25278V19.2528C4.16789 18.4769 5.75351 18 7.5 18C9.24649 18 10.8321 18.4769 12 19.2528M12 6.25278C13.1679 5.47686 14.7535 5 16.5 5C18.2465 5 19.8321 5.47686 21 6.25278V19.2528C19.8321 18.4769 18.2465 18 16.5 18C14.7535 18 13.1679 18.4769 12 19.2528', }, ] + const examples = [ { type: 'Client Components', src: 'app/_examples/client-component/page.tsx' }, { type: 'Server Components', src: 'app/_examples/server-component/page.tsx' }, @@ -35,117 +170,4 @@ const examples = [ { type: 'Route Handlers', src: 'app/_examples/route-handler.ts' }, { type: 'Middleware', src: 'app/middleware.ts' }, { type: 'Protected Routes', src: 'app/_examples/protected/page.tsx' }, -] - -export default async function Index() { - const supabase = createServerComponentClient({ cookies }) - - const { - data: { user }, - } = await supabase.auth.getUser() - - return ( -
-

- Supabase and Next.js Starter Template -

- -
- - {user ? ( - - Hey, {user.email}! {' '} - - - ) : ( - - Login - - )} - -
- -
- Supabase Logo -
- Vercel Logo -
- -

- The fastest way to get started building apps with{' '} - Supabase and Next.js -

- -
- - Get started by editing app/page.tsx - -
- -

- Everything you need to started -

- -
- {resources.map(({ title, subtitle, url, icon }) => ( - -

- {title} -

-

{subtitle}

-
- Vercel Logo -
- - ))} -
- -
-

- Examples -

-

- Look in the _examples folder to see how to create a - Supabase client in all the different contexts -

-
- -
- {examples.map(({ type, src }) => ( -
-
- - {type}{' '} - - - {src} - -
-
- ))} -
-
- ) -} +] \ No newline at end of file diff --git a/examples/with-supabase/app/logout-button.tsx b/examples/with-supabase/components/LogoutButton.tsx similarity index 74% rename from examples/with-supabase/app/logout-button.tsx rename to examples/with-supabase/components/LogoutButton.tsx index ebd7efc1732b..75952eceb0e9 100644 --- a/examples/with-supabase/app/logout-button.tsx +++ b/examples/with-supabase/components/LogoutButton.tsx @@ -11,11 +11,11 @@ export default function LogoutButton() { const signOut = async () => { await supabase.auth.signOut() - router.push('/login') + router.refresh() } return ( - ) diff --git a/examples/with-supabase/components/NextJsLogo.tsx b/examples/with-supabase/components/NextJsLogo.tsx new file mode 100644 index 000000000000..0ce02f268601 --- /dev/null +++ b/examples/with-supabase/components/NextJsLogo.tsx @@ -0,0 +1,16 @@ +import React from 'react' + +export default function NextJsLogo() { + return ( + + + + + + + + + + + ) +} diff --git a/examples/with-supabase/components/SupabaseLogo.tsx b/examples/with-supabase/components/SupabaseLogo.tsx new file mode 100644 index 000000000000..bc5dc47de65b --- /dev/null +++ b/examples/with-supabase/components/SupabaseLogo.tsx @@ -0,0 +1,39 @@ +import React from 'react' + +export default function SupabaseLogo() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/examples/with-supabase/package.json b/examples/with-supabase/package.json index 750ea08a6c6c..735d579b011b 100644 --- a/examples/with-supabase/package.json +++ b/examples/with-supabase/package.json @@ -7,7 +7,6 @@ }, "dependencies": { "@supabase/auth-helpers-nextjs": "latest", - "@supabase/supabase-js": "latest", "autoprefixer": "10.4.14", "next": "latest", "postcss": "8.4.24", diff --git a/examples/with-supabase/public/book.svg b/examples/with-supabase/public/book.svg deleted file mode 100644 index 3e6a9e5a3a82..000000000000 --- a/examples/with-supabase/public/book.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/with-supabase/public/code.svg b/examples/with-supabase/public/code.svg deleted file mode 100644 index d3a700ff4f14..000000000000 --- a/examples/with-supabase/public/code.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/with-supabase/public/next.svg b/examples/with-supabase/public/next.svg deleted file mode 100644 index 124d8da46159..000000000000 --- a/examples/with-supabase/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/with-supabase/public/supabase.svg b/examples/with-supabase/public/supabase.svg deleted file mode 100644 index 332f642a52db..000000000000 --- a/examples/with-supabase/public/supabase.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/with-supabase/public/vercel.svg b/examples/with-supabase/public/vercel.svg deleted file mode 100644 index d2f84222734f..000000000000 --- a/examples/with-supabase/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/with-supabase/public/youtube.svg b/examples/with-supabase/public/youtube.svg deleted file mode 100644 index 1c5ab8e86160..000000000000 --- a/examples/with-supabase/public/youtube.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/with-supabase/tailwind.config.js b/examples/with-supabase/tailwind.config.js index d49788cf9131..09415d5a2637 100644 --- a/examples/with-supabase/tailwind.config.js +++ b/examples/with-supabase/tailwind.config.js @@ -2,7 +2,16 @@ module.exports = { content: ['./app/**/*.{js,ts,jsx,tsx,mdx}'], theme: { - extend: {}, + extend: { + colors: { + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + btn: { + background: "hsl(var(--btn-background))", + "background-hover": "hsl(var(--btn-background-hover))" + } + } + }, }, plugins: [], } From b59b48373c643d6138e6d801d9e547603408dcef Mon Sep 17 00:00:00 2001 From: Francesco Sansalvadore Date: Sat, 24 Jun 2023 15:07:37 +0200 Subject: [PATCH 2/4] adjust supabase logo --- examples/with-supabase/components/SupabaseLogo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-supabase/components/SupabaseLogo.tsx b/examples/with-supabase/components/SupabaseLogo.tsx index bc5dc47de65b..2694dba88797 100644 --- a/examples/with-supabase/components/SupabaseLogo.tsx +++ b/examples/with-supabase/components/SupabaseLogo.tsx @@ -2,7 +2,7 @@ import React from 'react' export default function SupabaseLogo() { return ( - + From d2a61e4e8b3ebaf7e59ffee8fc0749d801ec2e74 Mon Sep 17 00:00:00 2001 From: Francesco Sansalvadore Date: Wed, 28 Jun 2023 10:46:00 +0200 Subject: [PATCH 3/4] install @supabase/supabase-js --- examples/with-supabase/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/with-supabase/package.json b/examples/with-supabase/package.json index 735d579b011b..750ea08a6c6c 100644 --- a/examples/with-supabase/package.json +++ b/examples/with-supabase/package.json @@ -7,6 +7,7 @@ }, "dependencies": { "@supabase/auth-helpers-nextjs": "latest", + "@supabase/supabase-js": "latest", "autoprefixer": "10.4.14", "next": "latest", "postcss": "8.4.24", From 2f0bfb81bb965b40504695753871cc04ec00f2b9 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Wed, 28 Jun 2023 20:59:23 -0700 Subject: [PATCH 4/4] lint fix --- examples/with-supabase/app/globals.css | 6 +- examples/with-supabase/app/login/page.tsx | 11 +- examples/with-supabase/app/page.tsx | 118 ++++++++++-------- .../with-supabase/components/LogoutButton.tsx | 5 +- .../with-supabase/components/NextJsLogo.tsx | 50 ++++++-- .../with-supabase/components/SupabaseLogo.tsx | 117 +++++++++++++---- examples/with-supabase/tailwind.config.js | 12 +- 7 files changed, 220 insertions(+), 99 deletions(-) diff --git a/examples/with-supabase/app/globals.css b/examples/with-supabase/app/globals.css index cdcc9e8bc361..50bd9fc33569 100644 --- a/examples/with-supabase/app/globals.css +++ b/examples/with-supabase/app/globals.css @@ -33,10 +33,10 @@ @keyframes animateIn { from { opacity: 0; - transform: translateY(10px) + transform: translateY(10px); } to { opacity: 1; - transform: translateY(0) + transform: translateY(0); } -} \ No newline at end of file +} diff --git a/examples/with-supabase/app/login/page.tsx b/examples/with-supabase/app/login/page.tsx index e9b7744e408e..016f31e0c98a 100644 --- a/examples/with-supabase/app/login/page.tsx +++ b/examples/with-supabase/app/login/page.tsx @@ -36,7 +36,10 @@ export default function Login() { return (
- + - Back + {' '} + Back {view === 'check-email' ? (

- Check {email} to continue signing up + Check {email} to continue signing + up

) : (
-
+
@@ -53,7 +89,7 @@ export default async function Index() {
-
+

Everything you need to get started

@@ -63,23 +99,30 @@ export default async function Index() { key={title} className="relative flex flex-col group rounded-lg border p-6 hover:border-foreground" href={url} - target='_blank' + target="_blank" + rel="noreferrer" >

{title}

{subtitle}

-
+
- + @@ -103,11 +146,9 @@ export default async function Index() {
-
+
-

- Examples -

+

Examples

Look in the _examples folder to see how to create a Supabase client in all the different contexts. @@ -115,7 +156,10 @@ export default async function Index() {

{examples.map(({ type, src }) => ( -
+
{type}
@@ -128,46 +172,18 @@ export default async function Index() {
-

Powered by +

+ Powered by{' '} + Supabase -

+ +

-
) } - -const resources = [ - { - title: 'Cookie-based Auth and the Next.js App Router', - subtitle: - 'This free course by Jon Meyers, shows you how to configure Supabase Auth to use cookies, and steps through some common patterns.', - url: 'https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF', - icon: 'M7 4V20M17 4V20M3 8H7M17 8H21M3 12H21M3 16H7M17 16H21M4 20H20C20.5523 20 21 19.5523 21 19V5C21 4.44772 20.5523 4 20 4H4C3.44772 4 3 4.44772 3 5V19C3 19.5523 3.44772 20 4 20Z', - }, - { - title: 'Supabase Next.js App Router Example', - subtitle: - 'Want to see a code example containing some common patterns with Next.js and Supabase? Check out this repo!', - url: 'https://github.com/supabase/supabase/tree/master/examples/auth/nextjs', - icon: 'M10 20L14 4M18 8L22 12L18 16M6 16L2 12L6 8', - }, - { - title: 'Supabase Auth Helpers Docs', - subtitle: - 'This template has configured Supabase Auth to use cookies for you, but the docs are a great place to learn more.', - url: 'https://supabase.com/docs/guides/auth/auth-helpers/nextjs', - icon: 'M12 6.25278V19.2528M12 6.25278C10.8321 5.47686 9.24649 5 7.5 5C5.75351 5 4.16789 5.47686 3 6.25278V19.2528C4.16789 18.4769 5.75351 18 7.5 18C9.24649 18 10.8321 18.4769 12 19.2528M12 6.25278C13.1679 5.47686 14.7535 5 16.5 5C18.2465 5 19.8321 5.47686 21 6.25278V19.2528C19.8321 18.4769 18.2465 18 16.5 18C14.7535 18 13.1679 18.4769 12 19.2528', - }, -] - - -const examples = [ - { type: 'Client Components', src: 'app/_examples/client-component/page.tsx' }, - { type: 'Server Components', src: 'app/_examples/server-component/page.tsx' }, - { type: 'Server Actions', src: 'app/_examples/server-action/page.tsx' }, - { type: 'Route Handlers', src: 'app/_examples/route-handler.ts' }, - { type: 'Middleware', src: 'app/middleware.ts' }, - { type: 'Protected Routes', src: 'app/_examples/protected/page.tsx' }, -] \ No newline at end of file diff --git a/examples/with-supabase/components/LogoutButton.tsx b/examples/with-supabase/components/LogoutButton.tsx index 75952eceb0e9..0718feceb8c4 100644 --- a/examples/with-supabase/components/LogoutButton.tsx +++ b/examples/with-supabase/components/LogoutButton.tsx @@ -15,7 +15,10 @@ export default function LogoutButton() { } return ( - ) diff --git a/examples/with-supabase/components/NextJsLogo.tsx b/examples/with-supabase/components/NextJsLogo.tsx index 0ce02f268601..ec41163ada71 100644 --- a/examples/with-supabase/components/NextJsLogo.tsx +++ b/examples/with-supabase/components/NextJsLogo.tsx @@ -2,15 +2,47 @@ import React from 'react' export default function NextJsLogo() { return ( - - - - - - - - - + + + + + + + + + ) } diff --git a/examples/with-supabase/components/SupabaseLogo.tsx b/examples/with-supabase/components/SupabaseLogo.tsx index 2694dba88797..e0076466714d 100644 --- a/examples/with-supabase/components/SupabaseLogo.tsx +++ b/examples/with-supabase/components/SupabaseLogo.tsx @@ -2,37 +2,102 @@ import React from 'react' export default function SupabaseLogo() { return ( - + - - - + + + - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + ) diff --git a/examples/with-supabase/tailwind.config.js b/examples/with-supabase/tailwind.config.js index 09415d5a2637..bcbebff0b509 100644 --- a/examples/with-supabase/tailwind.config.js +++ b/examples/with-supabase/tailwind.config.js @@ -4,13 +4,13 @@ module.exports = { theme: { extend: { colors: { - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', btn: { - background: "hsl(var(--btn-background))", - "background-hover": "hsl(var(--btn-background-hover))" - } - } + background: 'hsl(var(--btn-background))', + 'background-hover': 'hsl(var(--btn-background-hover))', + }, + }, }, }, plugins: [],