diff --git a/examples/with-supabase/app/globals.css b/examples/with-supabase/app/globals.css index fd81e885836d..50bd9fc33569 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); + } } 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..016f31e0c98a 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,94 @@ 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..472c5ce87482 100644 --- a/examples/with-supabase/app/page.tsx +++ b/examples/with-supabase/app/page.tsx @@ -1,8 +1,9 @@ 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' const resources = [ { @@ -10,21 +11,21 @@ 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', }, ] @@ -45,106 +46,143 @@ export default async function Index() { } = 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 - -
+ + +
+

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 started -

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

- {title} -

-

{subtitle}

-
- Vercel Logo -
- - ))} -
+ -
- {examples.map(({ type, src }) => ( -
-
- - {type}{' '} - - - {src} - -
+
+
+

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 + +

+
) diff --git a/examples/with-supabase/app/logout-button.tsx b/examples/with-supabase/components/LogoutButton.tsx similarity index 72% rename from examples/with-supabase/app/logout-button.tsx rename to examples/with-supabase/components/LogoutButton.tsx index ebd7efc1732b..0718feceb8c4 100644 --- a/examples/with-supabase/app/logout-button.tsx +++ b/examples/with-supabase/components/LogoutButton.tsx @@ -11,11 +11,14 @@ 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..ec41163ada71 --- /dev/null +++ b/examples/with-supabase/components/NextJsLogo.tsx @@ -0,0 +1,48 @@ +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..e0076466714d --- /dev/null +++ b/examples/with-supabase/components/SupabaseLogo.tsx @@ -0,0 +1,104 @@ +import React from 'react' + +export default function SupabaseLogo() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} 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..bcbebff0b509 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: [], }