├── .eslintrc
├── .gitignore
├── README.md
├── lib
    └── supabase.ts
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.tsx
    ├── auth.tsx
    ├── index.tsx
    └── verify-otp.tsx
├── postcss.config.js
├── public
    └── favicon.ico
├── styles
    └── globals.css
├── tailwind.config.js
└── tsconfig.json


/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next", "next/core-web-vitals"],
3 |   "rules": {
4 |     "react/no-unescaped-entities": "off"
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/.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 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/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).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | ```
12 | 
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 | 
15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
16 | 
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.tsx`.
18 | 
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 | 
21 | ## Learn More
22 | 
23 | To learn more about Next.js, take a look at the following resources:
24 | 
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 | 
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 | 
30 | ## Deploy on Vercel
31 | 
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 | 
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 | 


--------------------------------------------------------------------------------
/lib/supabase.ts:
--------------------------------------------------------------------------------
1 | import { createClient } from '@supabase/supabase-js'
2 | 
3 | const supabaseUrl = 'SUPABASE_URL'
4 | const supabaseKey = 'SUPABASE_KEY'
5 | const supabase = createClient(supabaseUrl, supabaseKey)
6 | 
7 | export default supabase
8 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/types/global" />
3 | /// <reference types="next/image-types/global" />
4 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   reactStrictMode: true,
3 | }
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-supabase-auth-boilerplate",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev -p 3001",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@supabase/supabase-js": "^1.21.0",
13 |     "next": "11.0.1",
14 |     "react": "17.0.2",
15 |     "react-dom": "17.0.2"
16 |   },
17 |   "devDependencies": {
18 |     "@types/react": "17.0.15",
19 |     "autoprefixer": "^10.3.1",
20 |     "eslint": "7.32.0",
21 |     "eslint-config-next": "11.0.1",
22 |     "postcss": "^8.3.6",
23 |     "tailwindcss": "^2.2.7",
24 |     "typescript": "4.3.5"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import type { AppProps } from 'next/app'
 2 | import Head from 'next/head'
 3 | 
 4 | import '../styles/globals.css'
 5 | 
 6 | const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
 7 |   return (
 8 |     <>
 9 |       <Head>
10 |         <title>NextJS and Supabase Auth Boilerplate</title>
11 |       </Head>
12 | 
13 |       <Component {...pageProps} />
14 |     </>
15 |   )
16 | }
17 | export default MyApp
18 | 


--------------------------------------------------------------------------------
/pages/auth.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | import { useRouter } from 'next/router'
 3 | 
 4 | import supabase from '../lib/supabase'
 5 | 
 6 | const Auth: React.FC = () => {
 7 |   const [email, setEmail] = useState<string>()
 8 |   const [phone, setPhone] = useState<string>()
 9 |   const [signupWithPhone, setSignupWithPhone] = useState(false)
10 |   const { push } = useRouter()
11 | 
12 |   const handleSubmit = async (e: React.FormEvent) => {
13 |     e.preventDefault()
14 | 
15 |     const { error } = await supabase.auth.signIn({
16 |       ...signupWithPhone ? { phone } : { email },
17 |     })
18 | 
19 |     if (!error) push(signupWithPhone ? 'verify-otp' : '/')
20 |   }
21 | 
22 |   return (
23 |     <div className="border rounded-lg p-12 w-4/12 mx-auto my-48">
24 |       <h3 className="font-extrabold text-3xl">Ahoy!</h3>
25 | 
26 |       <p className="text-gray-500 text-sm mt-4">
27 |         Fill in your email, we'll send you a magic link.
28 |       </p>
29 | 
30 |       <form onSubmit={handleSubmit}>
31 |         {signupWithPhone ? (
32 |           <input
33 |             type="phoneNumber"
34 |             placeholder="Your phone number"
35 |             className="border w-full p-3 rounded-lg mt-4 focus:border-indigo-500"
36 |             onChange={e => setPhone(e.target.value)}
37 |           />
38 |         ) : (
39 |           <input
40 |             type="email"
41 |             placeholder="Your email address"
42 |             className="border w-full p-3 rounded-lg mt-4 focus:border-indigo-500"
43 |             onChange={e => setEmail(e.target.value)}
44 |           />
45 |         )}
46 | 
47 |         <div className="my-4">
48 |           <button
49 |             className="text-sm text-gray-500 hover:underline"
50 |             onClick={() => setSignupWithPhone(!signupWithPhone)}
51 |           >
52 |             Use {signupWithPhone ? 'email' : 'phone'} instead
53 |           </button>
54 |         </div>
55 | 
56 |         <button
57 |           type="submit"
58 |           className="bg-indigo-500 text-white w-full p-3 rounded-lg mt-8 hover:bg-indigo-700"
59 |         >
60 |           Let's go!
61 |         </button>
62 |       </form>
63 |     </div>
64 |   )
65 | }
66 | 
67 | export default Auth
68 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | 
 3 | import supabase from '../lib/supabase'
 4 | 
 5 | const Homepage: React.FC = () => {
 6 |   const user = supabase.auth.user()
 7 | 
 8 |   return (
 9 |     <>
10 |       <Link href="/auth">Login now!</Link>
11 | 
12 |       <pre>
13 |         <code>
14 |           {JSON.stringify(user, null, 2)}
15 |         </code>
16 |       </pre>
17 |     </>
18 |   )
19 | }
20 | 
21 | export default Homepage
22 | 


--------------------------------------------------------------------------------
/pages/verify-otp.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | import { useRouter } from 'next/router'
 3 | 
 4 | import supabase from '../lib/supabase'
 5 | 
 6 | const VerifyOTP: React.FC = () => {
 7 |   const [token, setToken] = useState<string>('')
 8 |   // You can't use this, it's here for the purpose
 9 |   // of making the article more easy.
10 |   const phone = 'YOUR_PHONE_NUMBER'
11 |   const { push } = useRouter()
12 | 
13 |   const handleSubmit = async (e: React.FormEvent) => {
14 |     e.preventDefault()
15 | 
16 |     const { session, error } = await supabase.auth.verifyOTP({ phone, token })
17 | 
18 |     console.log({ session })
19 | 
20 |     if (!error) push('/')
21 |   }
22 | 
23 |   return (
24 |     <div className="border rounded-lg p-12 w-4/12 mx-auto my-48">
25 |       <h3 className="font-extrabold text-3xl">Verify OTP</h3>
26 | 
27 |       <p className="text-gray-500 text-sm mt-4">
28 |         You should've received an SMS with a code.
29 |       </p>
30 | 
31 |       <form onSubmit={handleSubmit}>
32 |         <input
33 |           type="token"
34 |           placeholder="Your OTP code"
35 |           className="border w-full p-3 rounded-lg mt-4 focus:border-indigo-500"
36 |           onChange={e => setToken(e.target.value)}
37 |         />
38 | 
39 |         <button
40 |           type="submit"
41 |           className="bg-indigo-500 text-white w-full p-3 rounded-lg mt-8 hover:bg-indigo-700"
42 |         >
43 |           Verify
44 |         </button>
45 |       </form>
46 |     </div>
47 |   )
48 | }
49 | 
50 | export default VerifyOTP
51 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0xtelmo/nextjs-supabase-auth-boilerplate/addbbc2581737c9e907d9fab31ae5f9679665f7d/public/favicon.ico


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
 3 |   darkMode: false, // or 'media' or 'class'
 4 |   theme: {
 5 |     extend: {},
 6 |   },
 7 |   variants: {
 8 |     extend: {},
 9 |   },
10 |   plugins: [],
11 | }
12 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve"
16 |   },
17 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
18 |   "exclude": ["node_modules"]
19 | }
20 | 


--------------------------------------------------------------------------------