+
);
}
+
+function AuthControls() {
+ const { isAuthenticated, isLoading, user, login, logout } = useAuth();
+
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
+
+ if (isAuthenticated && user) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/app/lib/auth/github-oauth.server.ts b/app/lib/auth/github-oauth.server.ts
new file mode 100644
index 00000000..e12266b7
--- /dev/null
+++ b/app/lib/auth/github-oauth.server.ts
@@ -0,0 +1,241 @@
+import { OAuthApp } from '@octokit/oauth-app';
+import { createCookieSessionStorage, redirect } from '@remix-run/node';
+import { v4 as uuidv4 } from 'uuid';
+
+// Define types for GitHub user data
+export interface GitHubUser {
+ id: number;
+ login: string;
+ name: string | null;
+ email: string | null;
+ avatar_url: string;
+ html_url: string;
+}
+
+// GitHub API response types
+interface GitHubUserResponse {
+ id: number;
+ login: string;
+ name: string | null;
+ email: string | null;
+ avatar_url: string;
+ html_url: string;
+ [key: string]: any; // For other properties we don't explicitly use
+}
+
+interface GitHubEmailResponse {
+ email: string;
+ primary: boolean;
+ verified: boolean;
+ visibility: string | null;
+}
+
+// Define types for session data
+export interface AuthSession {
+ accessToken: string;
+ user: GitHubUser;
+}
+
+// Error class for authentication errors
+export class AuthError extends Error {
+ constructor(message: string) {
+ super(message);
+ this.name = 'AuthError';
+ }
+}
+
+// Get environment variables
+const clientId = process.env.GITHUB_CLIENT_ID;
+const clientSecret = process.env.GITHUB_CLIENT_SECRET;
+const sessionSecret = process.env.SESSION_SECRET || 'buildify-session-secret';
+
+// Validate required environment variables
+if (!clientId || !clientSecret) {
+ console.warn(
+ 'GitHub OAuth is not configured properly. Please set GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET environment variables.'
+ );
+}
+
+// Create OAuth app instance
+export const oauthApp = new OAuthApp({
+ clientId: clientId || '',
+ clientSecret: clientSecret || '',
+ defaultScopes: ['read:user', 'user:email'],
+});
+
+// Create session storage
+const sessionStorage = createCookieSessionStorage({
+ cookie: {
+ name: 'buildify_auth_session',
+ httpOnly: true,
+ path: '/',
+ sameSite: 'lax',
+ secrets: [sessionSecret],
+ secure: process.env.NODE_ENV === 'production',
+ },
+});
+
+// Get session from request
+export async function getSession(request: Request) {
+ const cookie = request.headers.get('Cookie');
+ return sessionStorage.getSession(cookie);
+}
+
+// Generate state parameter for OAuth flow to prevent CSRF attacks
+export function generateState() {
+ return uuidv4();
+}
+
+// Store state in session
+export async function storeState(request: Request, state: string) {
+ const session = await getSession(request);
+ session.set('oauth:state', state);
+ return sessionStorage.commitSession(session);
+}
+
+// Verify state from session
+export async function verifyState(request: Request, state: string) {
+ const session = await getSession(request);
+ const storedState = session.get('oauth:state');
+
+ if (!storedState || storedState !== state) {
+ throw new AuthError('Invalid state parameter. Possible CSRF attack.');
+ }
+
+ // Clear the state after verification
+ session.unset('oauth:state');
+ return sessionStorage.commitSession(session);
+}
+
+// Generate authorization URL
+export function getAuthorizationUrl(state: string, redirectUri?: string) {
+ return oauthApp.getWebFlowAuthorizationUrl({
+ state,
+ redirectUrl: redirectUri,
+ });
+}
+
+// Exchange code for token
+export async function exchangeCodeForToken(code: string, state: string) {
+ try {
+ const { authentication } = await oauthApp.createToken({
+ code,
+ state,
+ });
+
+ return {
+ accessToken: authentication.token,
+ };
+ } catch (error) {
+ console.error('Error exchanging code for token:', error);
+ throw new AuthError('Failed to exchange code for token');
+ }
+}
+
+// Fetch user data from GitHub API
+export async function fetchGitHubUser(accessToken: string): Promise
+
+
+
+
+
+
+ Signed in as {user.username}
+
+
+
+ Your profile
+
+
+
+
+
+ );
+ }
+
+ // Loading state
+ return (
+
+
+
+
+
+
+ Authentication Failed
+{data.errorDescription}
++ Redirecting you back in a moment... +
+
+
+ );
+}
diff --git a/app/routes/auth.login.tsx b/app/routes/auth.login.tsx
new file mode 100644
index 00000000..1b94c478
--- /dev/null
+++ b/app/routes/auth.login.tsx
@@ -0,0 +1,162 @@
+import { json, redirect, type ActionFunctionArgs, type LoaderFunctionArgs, type MetaFunction } from '@remix-run/node';
+import { Form, useActionData, useLoaderData, useNavigation } from '@remix-run/react';
+import { useEffect, useState } from 'react';
+import { generateState, getAuthorizationUrl, isAuthenticated, storeState } from '~/lib/auth/github-oauth.server';
+import BackgroundRays from '~/components/ui/BackgroundRays';
+
+export const meta: MetaFunction = () => {
+ return [
+ { title: 'Login to Buildify' },
+ { name: 'description', content: 'Login to Buildify using your GitHub account' },
+ ];
+};
+
+export async function loader({ request }: LoaderFunctionArgs) {
+ // Check if user is already authenticated
+ const authenticated = await isAuthenticated(request);
+ if (authenticated) {
+ // Redirect to home page if already logged in
+ return redirect('/');
+ }
+
+ // Get redirect URL from query params (if any)
+ const url = new URL(request.url);
+ const redirectTo = url.searchParams.get('redirectTo') || '/';
+
+ // Check if GitHub OAuth is configured
+ const clientId = process.env.GITHUB_CLIENT_ID;
+ const clientSecret = process.env.GITHUB_CLIENT_SECRET;
+ const isConfigured = Boolean(clientId && clientSecret);
+
+ return json({
+ redirectTo,
+ isConfigured,
+ error: isConfigured ? null : 'GitHub OAuth is not configured. Please set GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET environment variables.',
+ });
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+ // Check if GitHub OAuth is configured
+ const clientId = process.env.GITHUB_CLIENT_ID;
+ const clientSecret = process.env.GITHUB_CLIENT_SECRET;
+
+ if (!clientId || !clientSecret) {
+ return json(
+ { error: 'GitHub OAuth is not configured. Please set GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET environment variables.' },
+ { status: 400 }
+ );
+ }
+
+ // Get form data
+ const formData = await request.formData();
+ const redirectTo = formData.get('redirectTo')?.toString() || '/';
+
+ try {
+ // Generate state for CSRF protection
+ const state = generateState();
+
+ // Get the callback URL
+ const url = new URL(request.url);
+ const callbackUrl = `${url.origin}/auth/callback`;
+
+ // Generate authorization URL
+ const { url: authorizationUrl } = getAuthorizationUrl(state, callbackUrl);
+
+ // Store state in session
+ const cookie = await storeState(request, state);
+
+ // Redirect to GitHub authorization URL
+ return redirect(authorizationUrl, {
+ headers: {
+ 'Set-Cookie': cookie,
+ },
+ });
+ } catch (error) {
+ console.error('Error initiating GitHub OAuth flow:', error);
+ return json(
+ { error: 'Failed to initiate login. Please try again later.' },
+ { status: 500 }
+ );
+ }
+}
+
+export default function Login() {
+ const { redirectTo, isConfigured, error } = useLoaderData
+
+
+
+
+ Authenticating...
++ Completing your sign-in with GitHub +
+
+
+ );
+}
diff --git a/app/routes/auth.logout.tsx b/app/routes/auth.logout.tsx
new file mode 100644
index 00000000..21e5e066
--- /dev/null
+++ b/app/routes/auth.logout.tsx
@@ -0,0 +1,138 @@
+import { json, redirect, type ActionFunctionArgs, type LoaderFunctionArgs, type MetaFunction } from '@remix-run/node';
+import { Form, useLoaderData, useNavigation } from '@remix-run/react';
+import { useEffect } from 'react';
+import { logout, getUserFromSession } from '~/lib/auth/github-oauth.server';
+import { updateProfile } from '~/lib/stores/profile';
+import BackgroundRays from '~/components/ui/BackgroundRays';
+
+export const meta: MetaFunction = () => {
+ return [
+ { title: 'Logout from Buildify' },
+ { name: 'description', content: 'Logout from your Buildify account' },
+ ];
+};
+
+export async function loader({ request }: LoaderFunctionArgs) {
+ // Get URL parameters
+ const url = new URL(request.url);
+ const redirectTo = url.searchParams.get('redirectTo') || '/';
+
+ // Get user data to display in the confirmation page
+ const user = await getUserFromSession(request);
+
+ return json({
+ redirectTo,
+ user,
+ });
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+ // Get form data
+ const formData = await request.formData();
+ const redirectTo = formData.get('redirectTo')?.toString() || '/';
+
+ // Perform logout and redirect
+ return logout(request, redirectTo);
+}
+
+export default function Logout() {
+ const { redirectTo, user } = useLoaderData
+
+
+
+
+ {errorMessage && (
+ Login to Buildify
++ Connect with your GitHub account to get started +
+
+ {errorMessage}
+
+ )}
+
+
+
+
+
+ + By logging in, you agree to the{' '} + + Terms of Service + {' '} + and{' '} + + Privacy Policy + +
+
+
+ );
+}
diff --git a/app/routes/profile.tsx b/app/routes/profile.tsx
new file mode 100644
index 00000000..920c7043
--- /dev/null
+++ b/app/routes/profile.tsx
@@ -0,0 +1,315 @@
+import { json, redirect, type ActionFunctionArgs, type LoaderFunctionArgs, type MetaFunction } from '@remix-run/node';
+import { Form, useActionData, useLoaderData, useNavigation } from '@remix-run/react';
+import { useEffect, useState } from 'react';
+import { getUserFromSession, isAuthenticated, requireAuthentication } from '~/lib/auth/github-oauth.server';
+import { useAuth } from '~/lib/hooks/useAuth';
+import { updateProfile } from '~/lib/stores/profile';
+import BackgroundRays from '~/components/ui/BackgroundRays';
+
+export const meta: MetaFunction = () => {
+ return [
+ { title: 'Your Profile - Buildify' },
+ { name: 'description', content: 'Manage your Buildify profile and preferences' },
+ ];
+};
+
+export async function loader({ request }: LoaderFunctionArgs) {
+ // Check if user is authenticated on the server side
+ const authenticated = await isAuthenticated(request);
+
+ if (!authenticated) {
+ // Redirect to login if not authenticated
+ return redirect('/auth/login?redirectTo=/profile');
+ }
+
+ // Get user data from session
+ const user = await getUserFromSession(request);
+
+ return json({ user });
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+ // Require authentication for this action
+ const user = await requireAuthentication(request, '/auth/login?redirectTo=/profile');
+
+ // Get form data
+ const formData = await request.formData();
+ const bio = formData.get('bio')?.toString() || '';
+ const displayName = formData.get('displayName')?.toString() || user.login;
+ const theme = formData.get('theme')?.toString() || 'system';
+
+ // Here you would typically update the user data in your database
+ // Since we're using client-side storage, we'll just return the updated values
+ // and let the client update the profile store
+
+ return json({
+ success: true,
+ message: 'Profile updated successfully',
+ updates: {
+ bio,
+ displayName,
+ theme,
+ },
+ });
+}
+
+export default function Profile() {
+ const { user: serverUser } = useLoaderData
+
+
+
+
+ {user ? (
+
+ ) : (
+ Logout
+ {user ? ( +
+ 
+
+ ) : (
+ + {user.name || user.login} +
++ {user.login} +
++ You are not currently logged in. +
+ )} +
+
+ Log in
+
+
+
+ Return to home
+
+
+ )}
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ Loading profile...
+
+
+
+
+
+ {actionData?.success && (
+ Your Profile
++ Manage your profile information and preferences +
+
+ {actionData.message}
+
+ )}
+
+
+ {/* GitHub Profile Information */}
+
+
+
+ {/* Profile Edit Form */}
+
+
+
+ 
+
+
+ + {displayName} +
+ ++ @{githubUser?.login || serverUser?.login} +
+ + {githubUser?.html_url && ( + + + GitHub Profile + + )} + +
+
+
+ Email
+
+
+ + {githubUser?.email || serverUser?.email || 'Not available'} +
+
+
+
+ Authentication Status
+
+
+ Authenticated with GitHub
+
+
+
+ Last Login
+{lastLogin}
+
+
+