Skip to content
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion gsecure/.env.local.example
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,9 @@ SUPPROT_EMAIL=your_support_email
SMTP_HOST=your_smtp_server
SMTP_PORT=465
SMTP_USER=your_smtp_user
SMTP_PASS=your_smtp_pass
SMTP_PASS=your_smtp_pass
# GitHub OAuth (register an OAuth App: GitHub -> Settings -> Developer settings
# -> OAuth Apps -> New OAuth App; set the callback to GITHUB_OAUTH_CALLBACK_URL)
GITHUB_OAUTH_CLIENT_ID=your_github_oauth_client_id
GITHUB_OAUTH_CLIENT_SECRET=your_github_oauth_client_secret
GITHUB_OAUTH_CALLBACK_URL=http://localhost:3000/api/v1/auth/github/callback
19 changes: 19 additions & 0 deletions gsecure/app/(auth)/login/page.js
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,25 @@ function Login(props) {
)}
</button>

{/* Divider */}
<div className="flex items-center gap-3 py-1">
<div className="h-px flex-1 bg-white/10"></div>
<span className="text-xs text-gray-500">or</span>
<div className="h-px flex-1 bg-white/10"></div>
</div>

{/* Continue with GitHub */}
<a
href="/api/v1/auth/github"
aria-label="Continue with GitHub"
className="flex items-center justify-center gap-3 w-full py-3 px-4 rounded-xl font-medium text-white bg-white/5 border border-white/15 hover:bg-white/10 transition-all duration-300"
>
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
<span>Continue with GitHub</span>
</a>

{/* Register link */}
<div className="text-center pt-4 border-t border-white/10">
<p className="text-gray-400 text-sm">
Expand Down
19 changes: 19 additions & 0 deletions gsecure/app/(auth)/register/page.js
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,25 @@ function Signup() {
)}
</button>

{/* Divider */}
<div className="flex items-center gap-3 py-1">
<div className="h-px flex-1 bg-white/10"></div>
<span className="text-xs text-gray-500">or</span>
<div className="h-px flex-1 bg-white/10"></div>
</div>

{/* Continue with GitHub */}
<a
href="/api/v1/auth/github"
aria-label="Continue with GitHub"
className="flex items-center justify-center gap-3 w-full py-3 px-4 rounded-xl font-medium text-white bg-white/5 border border-white/15 hover:bg-white/10 transition-all duration-300"
>
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
<span>Continue with GitHub</span>
</a>

{/* Login link */}
<div className="text-center pt-6 border-t border-white/10">
<p className="text-gray-400">
Expand Down
140 changes: 140 additions & 0 deletions gsecure/app/(auth)/success/page.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
"use client"
import { useAuth } from '@/lib/contexts/AuthContext';
import { useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
import toast from 'react-hot-toast';

// Post-OAuth interstitial.
//
// GitHub OAuth issues the `authToken` cookie on a redirect response. A few
// browsers don't make that freshly-Set-Cookie value available to the very next
// navigation, so landing straight on /vault could show a logged-out state
// until a manual refresh. This page confirms the session is live by calling
// /api/v1/auth/me (which reads the cookie server-side) and only forwards to
// /vault once that succeeds. The check retries a few times to absorb the
// brief cookie-propagation lag; each attempt is individually time-bounded so
// a hung network request cannot stall the loop indefinitely.
const MAX_ATTEMPTS = 5;
const RETRY_DELAY_MS = 400;
const FETCH_TIMEOUT_MS = 5000;

function AuthSuccess() {
const { setUser, setAuthenticated } = useAuth();
const router = useRouter();
const [status, setStatus] = useState('Confirming your secure session...');

useEffect(() => {
let active = true;
const apiHost = process.env.NEXT_PUBLIC_API_HOST || '';

const confirmSession = async () => {
for (let attempt = 1; attempt <= MAX_ATTEMPTS; attempt += 1) {
const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);

try {
const response = await fetch(`${apiHost}/api/v1/auth/me`, {
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
signal: controller.signal,
});

if (response.ok) {
const data = await response.json();
if (data?.data?.user) {
if (!active) return;
setUser(data.data.user);
setAuthenticated(true);
setStatus('Success! Redirecting to your vault...');
router.replace('/vault');
return;
}
}
} catch (error) {
console.error('Session confirmation attempt failed:', error);
} finally {
clearTimeout(timer);
}

// Cookie may not be readable yet - wait and retry.
if (attempt < MAX_ATTEMPTS) {
if (!active) return;
setStatus('Verifying your login...');
await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY_MS));
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
}

if (!active) return;
setStatus('Could not confirm your session. Redirecting to login...');
toast.error('We could not confirm your session. Please sign in again.');
router.replace('/login');
};

confirmSession();

return () => {
active = false;
};
}, [router, setUser, setAuthenticated]);

return (
<div className="min-h-screen flex items-center justify-center relative overflow-hidden">
{/* Animated background elements */}
<div className="absolute inset-0">
{/* Grid pattern */}
<div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff08_1px,transparent_1px),linear-gradient(to_bottom,#ffffff08_1px,transparent_1px)] bg-[size:4rem_4rem]"></div>

{/* Gradient orbs */}
<div className="absolute top-1/4 -left-20 w-72 h-72 bg-gradient-to-r from-amber-500/10 to-orange-600/10 rounded-full blur-3xl"></div>
<div className="absolute bottom-1/4 -right-20 w-72 h-72 bg-gradient-to-l from-blue-500/10 to-cyan-600/10 rounded-full blur-3xl"></div>
</div>

{/* Main content with glass effect */}
<div className="relative z-10 w-full max-w-md px-2 py-2">
<div className="relative rounded-3xl p-8 backdrop-blur-xl bg-gradient-to-br from-white/5 to-white/10 border border-white/20 shadow-2xl">
{/* Glow effect */}
<div className="absolute -inset-0.5 bg-gradient-to-r from-amber-500/30 via-transparent to-blue-500/30 rounded-3xl blur opacity-30"></div>

{/* Inner content */}
<div className="relative text-center">
{/* Lock icon */}
<div className="flex justify-center mb-6">
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center shadow-lg">
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
</div>

<h2 className="text-3xl font-bold bg-gradient-to-r from-amber-300 to-orange-400 bg-clip-text text-transparent">
Finishing sign-in
</h2>

{/* Spinner + status */}
<div className="mt-6 flex items-center justify-center">
<svg className="animate-spin h-5 w-5 mr-3 text-amber-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span className="text-gray-300 text-sm" aria-live="polite">{status}</span>
</div>

{/* Security note */}
<div className="mt-8 p-3 rounded-lg bg-gradient-to-r from-gray-900/50 to-gray-800/50 border border-gray-700/50">
<div className="flex items-start">
<svg className="w-4 h-4 text-amber-400 mt-0.5 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
</svg>
<p className="text-xs text-gray-400">
Verifying your encrypted session before opening your vault
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

export default AuthSuccess;
Loading