Merge pull request #66 from AndrewHUNGNguyen/#62-set-up-local-supabase-env

Add local setup to README

Author: samholmes

.gitignore

@@ -26,7 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*
+.env**
 
 # vercel
 .vercel

README.md

@@ -44,9 +44,62 @@ NEXT_PUBLIC_SUPABASE_URL=<your-supabase-project-url>
 NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-public-anon-key>
 ```
 
-These keys are safe to expose to the browser but should be scoped to the realtime channel only via Supabase RLS/policies.
+### Local Supabase Development
 
-**Note: This project is being refactored to use styled-components exclusively. Please do not add new Tailwind classes. See [styling guidelines](./docs/conventions/styling-guidelines.md) for details.**
+The repo includes a Supabase CLI project under `supabase/` with config and migrations, so you can run the full stack locally.
+
+#### 1. Prerequisites
+
+- **Docker Desktop** – [Install Docker Desktop](https://docs.docker.com/desktop/) and ensure it's running before starting Supabase.
+- **Supabase CLI** – [Install the Supabase CLI](https://supabase.com/docs/guides/local-development/cli/getting-started#installing-the-supabase-cli) for your platform.
+
+#### 2. Start the local Supabase stack
+
+From the repo root:
+
+```sh
+supabase start
+```
+
+On success, you should see output including:
+
+- **Project URL**: `http://127.0.0.1:54321`
+- **Studio**: `http://127.0.0.1:54323`
+- **Database**: `postgresql://postgres:postgres@127.0.0.1:54322/postgres`
+
+If you change migrations or want a clean slate:
+
+```sh
+supabase stop
+supabase db reset   # WARNING: destroys local data, reapplies migrations
+supabase start
+```
+
+#### 3. Point the Next.js app at local Supabase
+
+Update `.env.local` in the project root:
+
+```sh
+NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
+NEXT_PUBLIC_SUPABASE_ANON_KEY=sb_publishable_ACJWlzQHlZjBrEguHvfOxg_3BJgxAaH
+```
+
+> Note: the `sb_publishable_...` key is printed in the `supabase start` output under “Authentication Keys → Publishable”.
+
+Restart the dev server after changing `.env.local`.
+
+#### 4. Authentication
+
+For local testing, **username/password authentication** works out of the box – just sign up with any email and password in the app.
+
+For OAuth providers (GitHub, Google), see the [Local OAuth Setup Guide](./docs/local-oauth-setup.md).
+
+#### 5. Common local issues
+
+- **`"no Route matched with those values"` at `127.0.0.1:54321`**  
+  This is normal for the bare API root. Use Studio (`http://127.0.0.1:54323`) or `http://localhost:3000` instead.
+- **Docker daemon errors (`Cannot connect to the Docker daemon`)**  
+  Make sure Docker Desktop is installed and running before you call `supabase start`.
 
 ## Contributing
 
@@ -86,3 +139,7 @@ For detailed code style and organization guidelines:
    git push origin feature-name
    ```
 5. **Open a pull request on Github**
+
+## Footnotes
+
+> **Note:** This project is being refactored to use styled-components exclusively. Please do not add new Tailwind classes. See [styling guidelines](./docs/conventions/styling-guidelines.md) for details.

app/login/page.tsx

@@ -17,6 +17,7 @@ export default function Login() {
 	const [signingIn, setSigningIn] = useState(false)
 	const [signingUp, setSigningUp] = useState(false)
 	const [signupSuccess, setSignupSuccess] = useState(false)
+	const [showEmailForm, setShowEmailForm] = useState(false)
 	const router = useRouter()
 
 	useEffect(() => {
@@ -81,7 +82,7 @@ export default function Login() {
 		checkAuth()
 	}, [router])
 
-	const handleLogin = async (provider: "google" | "github") => {
+	const handleLogin = (provider: "google" | "github") => async () => {
 		try {
 			setError(null)
 			// Get redirect URL from query params to preserve it through OAuth flow
@@ -188,16 +189,35 @@ export default function Login() {
 
 			if (signUpError) throw signUpError
 
-			// Email confirmation required - show success message
-			setError(null)
-			setSignupSuccess(true)
+			// Check if email confirmation is required by checking if session exists
+			// Supabase only returns a session on signup if email confirmation is disabled
+			if (data.session) {
+				// No email confirmation required - redirect to setup
+				const setupUrl = redirectUrl
+					? `/setup?redirect=${encodeURIComponent(redirectUrl)}`
+					: "/setup"
+				router.push(setupUrl)
+			} else {
+				// Email confirmation required - show success message
+				setSignupSuccess(true)
+			}
 		} catch (err: any) {
 			setError(err.message)
 		} finally {
 			setSigningUp(false)
 		}
 	}
 
+	const handleBackClick = () => {
+		setError(null)
+		setShowEmailForm(false)
+	}
+
+	const handleContinueEmailClick = () => {
+		setError(null)
+		setShowEmailForm(true)
+	}
+
 	return (
 		<>
 			<BackgroundContainer>
@@ -219,80 +239,83 @@ export default function Login() {
 
 							{error && <ErrorMessage>{error}</ErrorMessage>}
 
-							<ButtonContainer>
-								<Button onClick={() => handleLogin("google")} size="default" variant="primary">
-									Continue with Google
-								</Button>
-
-								<Button onClick={() => handleLogin("github")} size="default" variant="secondary">
-									Continue with GitHub
-								</Button>
-							</ButtonContainer>
-
-							<Divider />
-
-							<EmailForm
-								onSubmit={(e) => {
-									e.preventDefault()
-									handleEmailSignIn(e)
-								}}
-							>
-								<FormTitle>Sign In with Email</FormTitle>
-								<InputGroup>
-									<TextInput
-										type="email"
-										variant="secondary"
-										size="default"
-										value={email}
-										onChange={(e) => setEmail(e.target.value)}
-										placeholder="Email"
-										required
-										disabled={signingIn || signingUp}
-									/>
-								</InputGroup>
-								<InputGroup>
-									<TextInput
-										type="password"
-										variant="secondary"
-										size="default"
-										value={password}
-										onChange={(e) => setPassword(e.target.value)}
-										placeholder="Password"
-										required
-										minLength={6}
-										disabled={signingIn || signingUp}
-									/>
-									<PasswordHelpText>
-										Password must be at least 6 characters with lowercase, uppercase, digits, and
-										symbols
-									</PasswordHelpText>
-								</InputGroup>
-								<ButtonWrapper>
-									<Button
-										type="submit"
-										size="default"
-										variant="primary"
-										disabled={signingIn || signingUp || !email || !password}
-									>
-										{signingIn ? "Signing in..." : "Sign In"}
+							{showEmailForm ? (
+								<EmailForm
+									onSubmit={(e) => {
+										e.preventDefault()
+										handleEmailSignIn(e)
+									}}
+								>
+									<InputGroup>
+										<TextInput
+											type="email"
+											variant="secondary"
+											size="default"
+											value={email}
+											onChange={(e) => setEmail(e.target.value)}
+											placeholder="Email"
+											required
+											disabled={signingIn || signingUp}
+										/>
+									</InputGroup>
+									<InputGroup>
+										<TextInput
+											type="password"
+											variant="secondary"
+											size="default"
+											value={password}
+											onChange={(e) => setPassword(e.target.value)}
+											placeholder="Password"
+											required
+											minLength={6}
+											disabled={signingIn || signingUp}
+										/>
+										<PasswordHelpText>Password must be at least 6 characters</PasswordHelpText>
+									</InputGroup>
+									<ButtonWrapper>
+										<Button
+											type="submit"
+											size="default"
+											variant="primary"
+											disabled={signingIn || signingUp || !email || !password}
+										>
+											{signingIn ? "Signing in..." : "Sign In"}
+										</Button>
+										<Button
+											type="button"
+											size="default"
+											variant="secondary"
+											disabled={signingIn || signingUp || !email || !password}
+											onClick={(e) => {
+												if (e) {
+													e.preventDefault()
+													e.stopPropagation()
+												}
+												handleEmailSignUp(e!)
+											}}
+										>
+											{signingUp ? "Signing up..." : "Sign Up"}
+										</Button>
+									</ButtonWrapper>
+									<BackButton type="button" onClick={handleBackClick}>
+										← Back to sign in options
+									</BackButton>
+								</EmailForm>
+							) : (
+								<ButtonContainer>
+									<Button onClick={handleLogin("google")} size="default" variant="primary">
+										Continue with Google
+									</Button>
+
+									<Button onClick={handleLogin("github")} size="default" variant="secondary">
+										Continue with GitHub
 									</Button>
-									<Button
-										type="button"
-										size="default"
-										variant="secondary"
-										disabled={signingIn || signingUp || !email || !password}
-										onClick={(e) => {
-											if (e) {
-												e.preventDefault()
-												e.stopPropagation()
-											}
-											handleEmailSignUp(e!)
-										}}
-									>
-										{signingUp ? "Signing up..." : "Sign Up"}
+
+									<Button onClick={handleContinueEmailClick} size="default" variant="tertiary">
+										Continue with Email
 									</Button>
-								</ButtonWrapper>
-							</EmailForm>
+								</ButtonContainer>
+							)}
 						</>
 					)}
 				</PageContainer>
@@ -354,12 +377,6 @@ const ErrorMessage = styled.div`
 	width: 100%;
 `
 
-const Divider = styled.hr`
-	border: none;
-	border-top: 1px solid rgba(255, 255, 255, 0.2);
-	width: 100%;
-`
-
 const EmailForm = styled.form`
 	display: flex;
 	flex-direction: column;
@@ -381,14 +398,6 @@ const ButtonWrapper = styled.div`
 	}
 `
 
-const FormTitle = styled.h2`
-	font-size: 1.25rem;
-	font-weight: 600;
-	color: rgba(255, 255, 255, 0.9);
-	margin: 0;
-	text-align: center;
-`
-
 const InputGroup = styled.div`
 	display: flex;
 	flex-direction: column;
@@ -406,3 +415,19 @@ const PasswordHelpText = styled.p`
 const SuccessContainer = styled.div`
 	width: 100%;
 `
+
+const BackButton = styled.button`
+	background: none;
+	border: none;
+	color: rgba(255, 255, 255, 0.6);
+	font-size: 0.875rem;
+	cursor: pointer;
+	padding: 0.5rem;
+	margin-top: 0.5rem;
+	transition: color 0.2s ease;
+	font-family: inherit;
+
+	&:hover {
+		color: rgba(255, 255, 255, 0.9);
+	}
+`