Home›Supabase in 5 Days›Day 1
Day 1 of 5
⏱ ~60 minutes
Supabase in 5 Days — Day 1

Project Setup and Authentication

Create a Supabase project, enable auth providers, and build sign-up/login/logout in a web app.

What Supabase Provides

Supabase gives you: a PostgreSQL database, auth system, file storage, edge functions, and realtime subscriptions — from one dashboard. The free tier covers most projects.

Install
npm install @supabase/supabase-js
src/supabase.js
import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
);
Auth: Sign up, login, logout
import { supabase } from './supabase';

// Email/password sign up
const { data, error } = await supabase.auth.signUp({
  email: '[email protected]',
  password: 'securepassword'
});

// Login
const { data: { session } } = await supabase.auth.signInWithPassword({
  email: '[email protected]',
  password: 'securepassword'
});

// OAuth (Google, GitHub)
await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: { redirectTo: window.location.origin }
});

// Logout
await supabase.auth.signOut();

// Get current user
const { data: { user } } = await supabase.auth.getUser();

// Listen to auth changes
supabase.auth.onAuthStateChange((event, session) => {
  console.log(event, session?.user);
});
📝 Day 1 Exercise
Build a Login Page
  1. C
  2. r
  3. e
  4. a
  5. t
  6. e
  8. a
  10. S
  11. u
  12. p
  13. a
  14. b
  15. a
  16. s
  17. e
  19. p
  20. r
  21. o
  22. j
  23. e
  24. c
  25. t
  26. .
  28. E
  29. n
  30. a
  31. b
  32. l
  33. e
  35. e
  36. m
  37. a
  38. i
  39. l
  41. a
  42. u
  43. t
  44. h
  45. .
  47. B
  48. u
  49. i
  50. l
  51. d
  53. a
  55. R
  56. e
  57. a
  58. c
  59. t
  61. o
  62. r
  64. H
  65. T
  66. M
  67. L
  69. p
  70. a
  71. g
  72. e
  74. w
  75. i
  76. t
  77. h
  79. s
  80. i
  81. g
  82. n
  83. -
  84. u
  85. p
  86. ,
  88. l
  89. o
  90. g
  91. i
  92. n
  93. ,
  95. a
  96. n
  97. d
  99. l
  100. o
  101. g
  102. o
  103. u
  104. t
  105. .
  107. D
  108. i
  109. s
  110. p
  111. l
  112. a
  113. y
  115. t
  116. h
  117. e
  119. u
  120. s
  121. e
  122. r
  123. '
  124. s
  126. e
  127. m
  128. a
  129. i
  130. l
  132. w
  133. h
  134. e
  135. n
  137. l
  138. o
  139. g
  140. g
  141. e
  142. d
  144. i
  145. n
  146. .
  148. H
  149. a
  150. n
  151. d
  152. l
  153. e
  155. t
  156. h
  157. e
  159. a
  160. u
  161. t
  162. h
  164. s
  165. t
  166. a
  167. t
  168. e
  170. c
  171. h
  172. a
  173. n
  174. g
  175. e
  177. e
  178. v
  179. e
  180. n
  181. t
  182. .

Day 1 Summary

  • Supabase = hosted Postgres + auth + storage + realtime. Free tier is generous.
  • signUp creates a new user. signInWithPassword logs in. signOut logs out.
  • onAuthStateChange fires whenever auth state changes — use it to update UI.
  • OAuth (Google, GitHub) is one function call. Supabase handles the redirect flow.
Next →
Day 2: Database: Tables and Queries
→
Finished this lesson?