├── .gitignore
├── README.md
├── components
├── footer.js
├── form.module.css
├── header.js
├── layout.js
├── loginForm.js
└── registrationForm.js
├── package.json
├── pages
├── api
│ ├── getUser.js
│ ├── hello.js
│ ├── login.js
│ ├── logout.js
│ └── register.js
├── index.js
├── login.js
├── protected.js
├── signup.js
└── welcome.js
├── public
├── favicon.ico
└── vercel.svg
├── utils
├── siteConfig.js
└── supabaseClient.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 |
21 | # debug
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 |
26 | # local env files
27 | .env.local
28 | .env.development.local
29 | .env.test.local
30 | .env.production.local
31 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) that allows new users to be registered to a Supabase database.
2 |
3 |
4 | ## Getting Started
5 |
6 | Set up a project in Supabase https://supabase.io/ and configure your env variables to have:
7 |
8 |
9 | ```bash
10 | export SUPABASE_KEY="SUPABASEKEYFROMSETTINGSSCREEN"
11 | export SUPABASE_URL="SUPABASEURLFROMSETTINGSSCREEN"
12 | export PRODUCTION_URL="www.example.com" # should point to your production URL, the PRODUCTION_URL is only used when not in the dev environment.
13 | ```
14 |
15 | For more context on how this application works check out my article on [Creating Protected Routes In NextJS With Supabase]( https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase).
16 |
17 | The key and URL values should be replaced with those found in your Supabase project.
18 |
19 | First, run the development server:
20 |
21 | ```bash
22 | npm run dev
23 | # or
24 | yarn dev
25 | ```
26 |
27 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
28 |
29 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
30 |
31 | ## Learn More
32 |
33 | To learn more about Next.js, take a look at the following resources:
34 |
35 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
36 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
37 |
38 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
39 |
40 | ## Deploy on Vercel
41 |
42 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
43 |
44 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
45 |
--------------------------------------------------------------------------------
/components/footer.js:
--------------------------------------------------------------------------------
1 | export default function Footer() {
2 | return (
3 | <>
4 |
9 |
10 |
50 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/components/form.module.css:
--------------------------------------------------------------------------------
1 | .form {
2 | display: flex;
3 | flex-direction: column;
4 | }
5 |
6 | .input {
7 | margin-bottom: 1em;
8 | }
9 |
--------------------------------------------------------------------------------
/components/header.js:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { useEffect, useState } from "react";
3 | import { useRouter } from "next/router";
4 |
5 | export default function Header() {
6 | const router = useRouter();
7 | const [isAuthed, setAuthStatus] = useState(false);
8 |
9 | useEffect(() => {
10 | fetch("./api/getUser")
11 | .then((response) => response.json())
12 | .then((result) => {
13 | setAuthStatus(result.user && result.user.role === "authenticated");
14 | });
15 | }, []);
16 |
17 | const signOutUser = async () => {
18 | const res = await fetch(`/api/logout`);
19 | if (res.status === 200) setAuthStatus(false);
20 | // redirect to homepage when logging out users
21 | if (window.location !== "/") router.push("/");
22 | // console.log(res);
23 | };
24 |
25 | return (
26 | <>
27 |
48 |
49 |
50 |
51 |
93 |
94 | );
95 | }
96 |
--------------------------------------------------------------------------------
/components/layout.js:
--------------------------------------------------------------------------------
1 | import Header from "./header";
2 | import Footer from "./footer";
3 | import Head from "next/head";
4 |
5 | export default function Layout({ children }) {
6 | return (
7 |
8 |
9 |
NextJS Supabase Protected Routes Example ✨
10 |
11 |
12 |
13 |
14 |
15 |
16 | {children}
17 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/components/loginForm.js:
--------------------------------------------------------------------------------
1 | import styles from "./form.module.css";
2 | import { useRouter } from "next/router";
3 |
4 | export default function Form() {
5 | const router = useRouter();
6 | const signInUser = async (event) => {
7 | event.preventDefault();
8 |
9 | const res = await fetch(`/api/login`, {
10 | body: JSON.stringify({
11 | email: event.target.email.value,
12 | password: event.target.password.value,
13 | }),
14 | headers: {
15 | "Content-Type": "application/json",
16 | },
17 | method: "POST",
18 | });
19 |
20 | const { user } = await res.json();
21 | if (user) router.push(`/protected`);
22 | // console.log(`Just signed in ${user.email}`);
23 | // console.log(`Just registered ${user.email} to DB.`);
24 | };
25 |
26 | return (
27 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/components/registrationForm.js:
--------------------------------------------------------------------------------
1 | import styles from "./form.module.css";
2 | import { useRouter } from "next/router";
3 |
4 | export default function Form() {
5 | const router = useRouter();
6 | const registerUser = async (event) => {
7 | event.preventDefault();
8 |
9 | const res = await fetch(`/api/register`, {
10 | body: JSON.stringify({
11 | name: event.target.name.value,
12 | email: event.target.email.value,
13 | password: event.target.password.value,
14 | }),
15 | headers: {
16 | "Content-Type": "application/json",
17 | },
18 | method: "POST",
19 | });
20 |
21 | const { user } = await res.json();
22 | if (user) router.push(`/welcome?email${user.email}`);
23 | // console.log(`Just registered ${user.email} to DB.`);
24 | };
25 |
26 | return (
27 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "protected-routes-with-supabase-nextjs-example",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start"
9 | },
10 | "dependencies": {
11 | "@supabase/supabase-js": "^1.5.0",
12 | "next": "10.0.8",
13 | "react": "17.0.1",
14 | "react-dom": "17.0.1"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/pages/api/getUser.js:
--------------------------------------------------------------------------------
1 | import { supabase } from "../../utils/supabaseClient";
2 |
3 | export default async function getUser(req, res) {
4 | const user = await supabase.auth.user();
5 | return res.status(200).json({ user: user });
6 | }
7 |
--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 |
3 | export default (req, res) => {
4 | res.statusCode = 200
5 | res.json({ name: 'John Doe' })
6 | }
7 |
--------------------------------------------------------------------------------
/pages/api/login.js:
--------------------------------------------------------------------------------
1 | import { supabase } from "../../utils/supabaseClient";
2 |
3 | export default async function registerUser(req, res) {
4 | const { email, password } = req.body;
5 | let { user, error } = await supabase.auth.signIn({
6 | email: email,
7 | password: password,
8 | });
9 | console.log({ error });
10 | console.log({ user });
11 | if (error) return res.status(401).json({ error: error.message });
12 | return res.status(200).json({ user: user });
13 | }
14 |
--------------------------------------------------------------------------------
/pages/api/logout.js:
--------------------------------------------------------------------------------
1 | import { supabase } from "../../utils/supabaseClient";
2 |
3 | export default async function logoutUser(req, res) {
4 | let { error } = await supabase.auth.signOut();
5 | console.log({ error });
6 |
7 | if (error) return res.status(401).json({ error: error.message });
8 | return res.status(200).json({ body: "User has been logged out" });
9 | }
10 |
--------------------------------------------------------------------------------
/pages/api/register.js:
--------------------------------------------------------------------------------
1 | import { supabase } from "../../utils/supabaseClient";
2 |
3 | export default async function registerUser(req, res) {
4 | const { email, password } = req.body;
5 | let { user, error } = await supabase.auth.signUp({
6 | email: email,
7 | password: password,
8 | });
9 | console.log({ error });
10 | console.log({ user });
11 | if (error) return res.status(401).json({ error: error.message });
12 | return res.status(200).json({ user: user });
13 | }
14 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import Layout from "../components/layout";
2 |
3 | export default function Home() {
4 | return (
5 | <>
6 |
7 |
8 |
9 | Hello, world!
10 |
11 |
23 |
24 | Welcome {user.email}!{" "}
25 |
26 | 👋🏾
27 | {" "}
28 |
{" "}
29 | You are currently viewing a top secret page!
30 |
10 | Sign Up to View Top Secret Protected Route
11 |
12 |
13 |
14 |
15 |
90 |
91 |
105 |
106 | );
107 | }
108 |
--------------------------------------------------------------------------------
/pages/welcome.js:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 | import Header from "../components/header";
3 | import Footer from "../components/footer";
4 | import { useRouter } from "next/router";
5 |
6 | export default function Welcome() {
7 | const router = useRouter();
8 | const { email } = router.query;
9 |
10 | return (
11 |
12 |
13 |
NextJS Supabase Protected Routes Example
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | Thank you for signing up. Please check your {email} inbox to verify
22 | your e-mail address!
23 |
24 |
25 |
26 |
27 |
28 |
118 |
119 |
133 |