Day 01 Foundations

Project Setup and Authentication

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

~1 hour Hands-on Precision AI Academy

Today’s Objective

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

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
INSTALL
npm install @supabase/supabase-js
src/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
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
  7. a
  8. S
  9. u
  10. p
  11. a
  12. b
  13. a
  14. s
  15. e
  16. p
  17. r
  18. o
  19. j
  20. e
  21. c
  22. t
  23. .
  24. E
  25. n
  26. a
  27. b
  28. l
  29. e
  30. e
  31. m
  32. a
  33. i
  34. l
  35. a
  36. u
  37. t
  38. h
  39. .
  40. B
  41. u
  42. i
  43. l
  44. d
  45. a
  46. R
  47. e
  48. a
  49. c
  50. t
  51. o
  52. r
  53. H
  54. T
  55. M
  56. L
  57. p
  58. a
  59. g
  60. e
  61. w
  62. i
  63. t
  64. h
  65. s
  66. i
  67. g
  68. n
  69. -
  70. u
  71. p
  72. ,
  73. l
  74. o
  75. g
  76. i
  77. n
  78. ,
  79. a
  80. n
  81. d
  82. l
  83. o
  84. g
  85. o
  86. u
  87. t
  88. .
  89. D
  90. i
  91. s
  92. p
  93. l
  94. a
  95. y
  96. t
  97. h
  98. e
  99. u
  100. s
  101. e
  102. r
  103. '
  104. s
  105. e
  106. m
  107. a
  108. i
  109. l
  110. w
  111. h
  112. e
  113. n
  114. l
  115. o
  116. g
  117. g
  118. e
  119. d
  120. i
  121. n
  122. .
  123. H
  124. a
  125. n
  126. d
  127. l
  128. e
  129. t
  130. h
  131. e
  132. a
  133. u
  134. t
  135. h
  136. s
  137. t
  138. a
  139. t
  140. e
  141. c
  142. h
  143. a
  144. n
  145. g
  146. e
  147. e
  148. v
  149. e
  150. n
  151. t
  152. .

Supporting Resources

Go deeper with these references.

Supabase
Supabase Documentation Complete reference for Auth, Database, Storage, Edge Functions, and Realtime.
GitHub
Supabase Examples Official collection of quickstarts and example apps in multiple frameworks.
YouTube
Supabase YouTube Channel Tutorial videos from the Supabase team covering new features and patterns.

Day 1 Checkpoint

Before moving on, make sure you can answer these without looking:

Continue To Day 2
Database: Tables and Queries