feat(auth): add "Continue with Google" OAuth 2.0 login
Server-side authorization-code flow: /v1/auth/google redirects to the consent screen with a CSRF state cookie; /v1/auth/google/callback exchanges the code, validates the ID token (iss/aud/exp/email_verified), and mints a 30-day session via upsertOAuthLogin. /v1/auth/providers lets the login UI hide the button until GOOGLE_OAUTH_ID/SECRET are set. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Sadjadi
@@ -1,16 +1,32 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useState } from 'react';
|
||||
import { Input, Label } from '@/components/input';
|
||||
import { Logo } from '@/components/logo';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input, Label } from '@/components/input';
|
||||
import { apiFetch } from '@/lib/api';
|
||||
import { apiFetch, apiUrl } from '@/lib/api';
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const ERROR_COPY: Record<string, string> = {
|
||||
google_failed: 'Google sign-in could not be completed. Please try again.',
|
||||
google_state: 'Google sign-in expired or was interrupted. Please try again.',
|
||||
};
|
||||
|
||||
export default function LoginPage() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [state, setState] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [googleEnabled, setGoogleEnabled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
apiFetch<{ google: boolean }>('/v1/auth/providers')
|
||||
.then((r) => setGoogleEnabled(r.google))
|
||||
.catch(() => setGoogleEnabled(false));
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const err = params.get('error');
|
||||
if (err && ERROR_COPY[err]) setError(ERROR_COPY[err]);
|
||||
}, []);
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
@@ -34,34 +50,54 @@ export default function LoginPage() {
|
||||
<Logo className="mb-10" />
|
||||
<h1 className="text-[20px] font-semibold tracking-tight">Sign in to your workspace</h1>
|
||||
<p className="mt-1 text-[13px] text-[--color-fg-muted]">
|
||||
We'll email you a magic link. No password.
|
||||
Continue with Google, or get a magic link by email.
|
||||
</p>
|
||||
|
||||
{state !== 'sent' ? (
|
||||
<form onSubmit={submit} className="mt-7 space-y-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
required
|
||||
autoComplete="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="you@company.com"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
disabled={state === 'sending'}
|
||||
>
|
||||
{state === 'sending' ? 'Sending…' : 'Send magic link'}
|
||||
</Button>
|
||||
{error && <p className="text-[12px] text-[--color-danger]">{error}</p>}
|
||||
</form>
|
||||
<>
|
||||
{googleEnabled && (
|
||||
<>
|
||||
<a
|
||||
href={apiUrl('/v1/auth/google')}
|
||||
className="mt-7 flex h-10 w-full items-center justify-center gap-2.5 rounded-md border border-[--color-border] bg-[--color-bg-elevated] text-[13px] font-medium text-[--color-fg] transition-colors duration-200 hover:border-[--color-border-strong]"
|
||||
>
|
||||
<GoogleIcon />
|
||||
Continue with Google
|
||||
</a>
|
||||
<div className="my-5 flex items-center gap-3">
|
||||
<span className="h-px flex-1 bg-[--color-border]" />
|
||||
<span className="text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
|
||||
or
|
||||
</span>
|
||||
<span className="h-px flex-1 bg-[--color-border]" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<form onSubmit={submit} className={googleEnabled ? 'space-y-3' : 'mt-7 space-y-3'}>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
required
|
||||
autoComplete="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="you@company.com"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
disabled={state === 'sending'}
|
||||
>
|
||||
{state === 'sending' ? 'Sending…' : 'Send magic link'}
|
||||
</Button>
|
||||
{error && <p className="text-[12px] text-[--color-danger]">{error}</p>}
|
||||
</form>
|
||||
</>
|
||||
) : (
|
||||
<div className="panel mt-7 p-4">
|
||||
<p className="text-[13px]">
|
||||
@@ -82,3 +118,26 @@ export default function LoginPage() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GoogleIcon() {
|
||||
return (
|
||||
<svg width="16" height="16" viewBox="0 0 18 18" aria-hidden="true">
|
||||
<path
|
||||
fill="#4285F4"
|
||||
d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615Z"
|
||||
/>
|
||||
<path
|
||||
fill="#34A853"
|
||||
d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18Z"
|
||||
/>
|
||||
<path
|
||||
fill="#FBBC05"
|
||||
d="M3.964 10.706A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.706V4.962H.957A8.997 8.997 0 0 0 0 9c0 1.452.348 2.827.957 4.038l3.007-2.332Z"
|
||||
/>
|
||||
<path
|
||||
fill="#EA4335"
|
||||
d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.962L3.964 7.294C4.672 5.167 6.656 3.58 9 3.58Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000';
|
||||
|
||||
export async function apiFetch<T = unknown>(
|
||||
path: string,
|
||||
init: RequestInit = {},
|
||||
): Promise<T> {
|
||||
export async function apiFetch<T = unknown>(path: string, init: RequestInit = {}): Promise<T> {
|
||||
const res = await fetch(`${API_BASE}${path}`, {
|
||||
credentials: 'include',
|
||||
cache: 'no-store',
|
||||
@@ -26,6 +23,11 @@ export async function apiFetch<T = unknown>(
|
||||
return (await res.json()) as T;
|
||||
}
|
||||
|
||||
/** Absolute API URL for a path — use for full-page navigations (OAuth redirects). */
|
||||
export function apiUrl(path: string): string {
|
||||
return `${API_BASE}${path}`;
|
||||
}
|
||||
|
||||
export function apiWebSocketURL(path: string): string {
|
||||
const httpBase = API_BASE;
|
||||
const wsBase = httpBase.replace(/^http/, 'ws');
|
||||
|
||||
Reference in New Issue
Block a user