root
efe8fe36d4
- Google, Apple, GitHub SSO login via popup OAuth flow - New /mobile/auth page with 3-click registration (Click provider → authorize → auto-logged in) - Email registration with name + email + password - /mobile/setup page with step-by-step OAuth setup guide - OAuth env vars in .env.example, docker-compose.yml - scripts/setup-sso.sh for one-command credential setup - Graceful 503 when OAuth not configured
583 lines
20 KiB
TypeScript
583 lines
20 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
export default function SetupPage() {
|
|
const [tab, setTab] = useState<'github' | 'google' | 'apple' | 'env'>('github');
|
|
const [copied, setCopied] = useState('');
|
|
|
|
const copyToClipboard = (text: string, label: string) => {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
setCopied(label);
|
|
setTimeout(() => setCopied(''), 2000);
|
|
}).catch(() => {
|
|
// Fallback
|
|
const ta = document.createElement('textarea');
|
|
ta.value = text;
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(ta);
|
|
setCopied(label);
|
|
setTimeout(() => setCopied(''), 2000);
|
|
});
|
|
};
|
|
|
|
const tabs = [
|
|
{ id: 'github' as const, label: 'GitHub', icon: '🐙' },
|
|
{ id: 'google' as const, label: 'Google', icon: '🔵' },
|
|
{ id: 'apple' as const, label: 'Apple', icon: '🍎' },
|
|
{ id: 'env' as const, label: 'Apply', icon: '⚡' },
|
|
];
|
|
|
|
return (
|
|
<div style={{
|
|
maxWidth: '600px',
|
|
margin: '0 auto',
|
|
padding: '16px',
|
|
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
color: '#e0e0e0',
|
|
background: '#0a0a0a',
|
|
minHeight: '100vh',
|
|
}}>
|
|
<h1 style={{ fontSize: '24px', marginBottom: '8px', color: '#D4AF37' }}>
|
|
⚡ SSO Setup Guide
|
|
</h1>
|
|
<p style={{ color: '#888', fontSize: '14px', marginBottom: '24px' }}>
|
|
Create OAuth credentials for Google, Apple, and GitHub SSO.
|
|
Each takes ~5 minutes.
|
|
</p>
|
|
|
|
{/* Tab bar */}
|
|
<div style={{
|
|
display: 'flex',
|
|
gap: '8px',
|
|
marginBottom: '20px',
|
|
overflowX: 'auto',
|
|
paddingBottom: '4px',
|
|
}}>
|
|
{tabs.map(t => (
|
|
<button
|
|
key={t.id}
|
|
onClick={() => setTab(t.id)}
|
|
style={{
|
|
padding: '10px 16px',
|
|
borderRadius: '8px',
|
|
border: tab === t.id ? '2px solid #D4AF37' : '1px solid #333',
|
|
background: tab === t.id ? '#1a1a1a' : '#111',
|
|
color: tab === t.id ? '#D4AF37' : '#666',
|
|
fontSize: '14px',
|
|
cursor: 'pointer',
|
|
whiteSpace: 'nowrap',
|
|
fontWeight: tab === t.id ? 600 : 400,
|
|
transition: 'all 0.2s',
|
|
}}
|
|
>
|
|
{t.icon} {t.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* GitHub Tab */}
|
|
{tab === 'github' && (
|
|
<div>
|
|
<h2 style={{ fontSize: '18px', marginBottom: '16px', color: '#fff' }}>
|
|
Create a GitHub OAuth App
|
|
</h2>
|
|
|
|
<Step number={1} title="Go to GitHub Developer Settings">
|
|
<p>Open this link in your browser:</p>
|
|
<CodeBlock
|
|
text="https://github.com/settings/developers"
|
|
label="GitHub URL"
|
|
copied={copied}
|
|
onCopy={copyToClipboard}
|
|
/>
|
|
</Step>
|
|
|
|
<Step number={2} title="Create New OAuth App">
|
|
<p>Click <strong>"New OAuth App"</strong> button (top right).</p>
|
|
</Step>
|
|
|
|
<Step number={3} title="Fill in the form">
|
|
<FormField label="Application name" value="FalahOS Auth" />
|
|
<FormField label="Homepage URL" value="https://falahos.my" />
|
|
<FormField label="Application description" value="FalahOS - Islamic Finance & Charity Ecosystem" />
|
|
<FormField
|
|
label="Authorization callback URL"
|
|
value="https://falahos.my/mobile/api/auth/github/callback"
|
|
/>
|
|
</Step>
|
|
|
|
<Step number={4} title="Register Application">
|
|
<p>Click <strong>"Register application"</strong>.</p>
|
|
</Step>
|
|
|
|
<Step number={5} title="Copy Your Credentials">
|
|
<p>You will see:</p>
|
|
<ul style={{ color: '#ccc', paddingLeft: '20px', lineHeight: 1.8 }}>
|
|
<li><strong>Client ID</strong> — copy this</li>
|
|
<li><strong>Client Secret</strong> — click <strong>"Generate a new client secret"</strong> and copy it</li>
|
|
</ul>
|
|
|
|
<p style={{ marginTop: '16px', fontWeight: 600, color: '#D4AF37' }}>
|
|
Paste them below when you have them:
|
|
</p>
|
|
<div style={{
|
|
background: '#0d0d0d',
|
|
border: '1px solid #333',
|
|
borderRadius: '8px',
|
|
padding: '12px',
|
|
marginTop: '8px',
|
|
}}>
|
|
<div style={{ fontSize: '12px', color: '#888', marginBottom: '4px' }}>
|
|
GITHUB_CLIENT_ID=your_client_id_here
|
|
</div>
|
|
<div style={{ fontSize: '12px', color: '#888', marginBottom: '12px' }}>
|
|
GITHUB_CLIENT_SECRET=your_client_secret_here
|
|
</div>
|
|
<CopyButton
|
|
text={`GITHUB_CLIENT_ID="<your-client-id>"\nGITHUB_CLIENT_SECRET="<your-client-secret>"`}
|
|
label="github-template"
|
|
copied={copied}
|
|
onCopy={copyToClipboard}
|
|
/>
|
|
</div>
|
|
</Step>
|
|
</div>
|
|
)}
|
|
|
|
{/* Google Tab */}
|
|
{tab === 'google' && (
|
|
<div>
|
|
<h2 style={{ fontSize: '18px', marginBottom: '16px', color: '#fff' }}>
|
|
Create Google OAuth 2.0 Client
|
|
</h2>
|
|
|
|
<Step number={1} title="Go to Google Cloud Console">
|
|
<CodeBlock
|
|
text="https://console.cloud.google.com/apis/credentials"
|
|
label="Google URL"
|
|
copied={copied}
|
|
onCopy={copyToClipboard}
|
|
/>
|
|
</Step>
|
|
|
|
<Step number={2} title="Select or Create a Project">
|
|
<p>If you don't have a project, click <strong>"Create Project"</strong> and name it <strong>"FalahOS"</strong>.</p>
|
|
</Step>
|
|
|
|
<Step number={3} title="Configure Consent Screen">
|
|
<p>Click <strong>"OAuth consent screen"</strong> (left sidebar).</p>
|
|
<ul style={{ color: '#ccc', paddingLeft: '20px', lineHeight: 1.8 }}>
|
|
<li>Choose <strong>External</strong> user type</li>
|
|
<li>App name: <strong>FalahOS</strong></li>
|
|
<li>User support email: <strong>your email</strong></li>
|
|
<li>Developer Contact: <strong>your email</strong></li>
|
|
<li>Add scopes: <strong>email, profile, openid</strong></li>
|
|
<li>Add test users: <strong>your email</strong></li>
|
|
</ul>
|
|
</Step>
|
|
|
|
<Step number={4} title="Create Credentials">
|
|
<p>Click <strong>"Create Credentials" → "OAuth client ID"</strong>.</p>
|
|
<FormField label="Application type" value="Web application" />
|
|
<FormField label="Name" value="FalahOS Web Client" />
|
|
<FormField
|
|
label="Authorized JavaScript origins"
|
|
value="https://falahos.my"
|
|
/>
|
|
<FormField
|
|
label="Authorized redirect URIs"
|
|
value="https://falahos.my/mobile/api/auth/google/callback"
|
|
/>
|
|
</Step>
|
|
|
|
<Step number={5} title="Copy Your Credentials">
|
|
<p>Click <strong>"Create"</strong> and copy the popup values:</p>
|
|
<div style={{
|
|
background: '#0d0d0d',
|
|
border: '1px solid #333',
|
|
borderRadius: '8px',
|
|
padding: '12px',
|
|
marginTop: '8px',
|
|
}}>
|
|
<div style={{ fontSize: '12px', color: '#888', marginBottom: '4px' }}>
|
|
GOOGLE_CLIENT_ID=xxxxxxxxx.apps.googleusercontent.com
|
|
</div>
|
|
<div style={{ fontSize: '12px', color: '#888', marginBottom: '12px' }}>
|
|
GOOGLE_CLIENT_SECRET=GOCSPX-xxxxxxxx
|
|
</div>
|
|
<CopyButton
|
|
text={`GOOGLE_CLIENT_ID="<your-client-id>"\nGOOGLE_CLIENT_SECRET="<your-client-secret>"`}
|
|
label="google-template"
|
|
copied={copied}
|
|
onCopy={copyToClipboard}
|
|
/>
|
|
</div>
|
|
</Step>
|
|
</div>
|
|
)}
|
|
|
|
{/* Apple Tab */}
|
|
{tab === 'apple' && (
|
|
<div>
|
|
<h2 style={{ fontSize: '18px', marginBottom: '16px', color: '#fff' }}>
|
|
Set Up Sign In with Apple
|
|
</h2>
|
|
|
|
<Step number={1} title="Go to Apple Developer">
|
|
<CodeBlock
|
|
text="https://developer.apple.com/account/resources/identifiers/list"
|
|
label="Apple URL"
|
|
copied={copied}
|
|
onCopy={copyToClipboard}
|
|
/>
|
|
<p style={{ color: '#ff6b6b', fontSize: '13px', marginTop: '8px' }}>
|
|
⚠️ Requires an Apple Developer account ($99/year).
|
|
</p>
|
|
</Step>
|
|
|
|
<Step number={2} title="Register a Service ID">
|
|
<ul style={{ color: '#ccc', paddingLeft: '20px', lineHeight: 1.8 }}>
|
|
<li>Click <strong>"+"</strong> → <strong>"Service IDs"</strong></li>
|
|
<li>Description: <strong>FalahOS Auth</strong></li>
|
|
<li>Identifier: <strong>com.falahos.auth</strong></li>
|
|
<li>Click <strong>"Continue"</strong> → <strong>"Register"</strong></li>
|
|
</ul>
|
|
</Step>
|
|
|
|
<Step number={3} title="Enable Sign in with Apple">
|
|
<ul style={{ color: '#ccc', paddingLeft: '20px', lineHeight: 1.8 }}>
|
|
<li>Click on your new Service ID</li>
|
|
<li>Check <strong>"Sign in with Apple"</strong> → <strong>"Configure"</strong></li>
|
|
<li>Select <strong>"Use as default"</strong> or create a new Service</li>
|
|
<li>Web Domain: <strong>falahos.my</strong></li>
|
|
<li>Return URLs: <strong>https://falahos.my/mobile/api/auth/apple/callback</strong></li>
|
|
<li>Click <strong>"Save"</strong></li>
|
|
</ul>
|
|
</Step>
|
|
|
|
<Step number={4} title="Create a Key">
|
|
<ul style={{ color: '#ccc', paddingLeft: '20px', lineHeight: 1.8 }}>
|
|
<li>Go to <strong>Keys</strong> → <strong>"+"</strong></li>
|
|
<li>Select <strong>"Sign in with Apple"</strong></li>
|
|
<li>Configure with your Service ID</li>
|
|
<li>Download the <strong>.p8</strong> key file</li>
|
|
<li>Note the <strong>Key ID</strong></li>
|
|
</ul>
|
|
</Step>
|
|
|
|
<Step number={5} title="Copy Values">
|
|
<div style={{
|
|
background: '#0d0d0d',
|
|
border: '1px solid #333',
|
|
borderRadius: '8px',
|
|
padding: '12px',
|
|
marginTop: '8px',
|
|
}}>
|
|
<div style={{ fontSize: '12px', color: '#888', marginBottom: '4px' }}>
|
|
APPLE_CLIENT_ID=com.falahos.auth (your Service ID)
|
|
</div>
|
|
<div style={{ fontSize: '12px', color: '#888', marginBottom: '12px' }}>
|
|
APPLE_CLIENT_SECRET= (generated JWT, not needed immediately)
|
|
</div>
|
|
<CopyButton
|
|
text={`APPLE_CLIENT_ID="com.falahos.auth"\nAPPLE_CLIENT_SECRET=""`}
|
|
label="apple-template"
|
|
copied={copied}
|
|
onCopy={copyToClipboard}
|
|
/>
|
|
</div>
|
|
</Step>
|
|
</div>
|
|
)}
|
|
|
|
{/* Apply Tab */}
|
|
{tab === 'env' && (
|
|
<div>
|
|
<h2 style={{ fontSize: '18px', marginBottom: '16px', color: '#fff' }}>
|
|
Apply Credentials & Deploy
|
|
</h2>
|
|
|
|
<p style={{ color: '#ccc', marginBottom: '16px' }}>
|
|
Once you have your credentials from all providers, paste them below
|
|
and we'll configure the server.
|
|
</p>
|
|
|
|
<EnvForm />
|
|
</div>
|
|
)}
|
|
|
|
<div style={{
|
|
marginTop: '32px',
|
|
padding: '16px',
|
|
background: '#111',
|
|
borderRadius: '8px',
|
|
border: '1px solid #333',
|
|
}}>
|
|
<h3 style={{ color: '#D4AF37', fontSize: '16px', marginBottom: '8px' }}>
|
|
✅ Quick Summary
|
|
</h3>
|
|
<p style={{ color: '#aaa', fontSize: '14px', lineHeight: 1.6 }}>
|
|
After creating all 3 OAuth apps, you'll have:
|
|
</p>
|
|
<ul style={{ color: '#ccc', paddingLeft: '20px', lineHeight: 1.8 }}>
|
|
<li>🐙 <strong>GitHub</strong>: Client ID + Secret</li>
|
|
<li>🔵 <strong>Google</strong>: Client ID + Secret</li>
|
|
<li>🍎 <strong>Apple</strong>: Service ID (Client ID) + Key</li>
|
|
</ul>
|
|
<p style={{ color: '#aaa', fontSize: '14px', marginTop: '8px', lineHeight: 1.6 }}>
|
|
Contact me on Telegram with the values and I'll apply them instantly.
|
|
Or use the SSH command below to configure yourself.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Step({ number, title, children }: { number: number; title: string; children: React.ReactNode }) {
|
|
return (
|
|
<div style={{
|
|
marginBottom: '20px',
|
|
padding: '12px',
|
|
background: '#111',
|
|
borderRadius: '8px',
|
|
border: '1px solid #222',
|
|
}}>
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '10px',
|
|
marginBottom: '8px',
|
|
}}>
|
|
<span style={{
|
|
width: '28px',
|
|
height: '28px',
|
|
borderRadius: '50%',
|
|
background: '#D4AF37',
|
|
color: '#000',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontWeight: 700,
|
|
fontSize: '14px',
|
|
}}>
|
|
{number}
|
|
</span>
|
|
<h3 style={{ fontSize: '15px', color: '#fff', margin: 0 }}>{title}</h3>
|
|
</div>
|
|
<div style={{ marginLeft: '38px', fontSize: '14px', color: '#ccc', lineHeight: 1.6 }}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function FormField({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div style={{ marginBottom: '8px' }}>
|
|
<div style={{ fontSize: '12px', color: '#888', marginBottom: '2px' }}>{label}</div>
|
|
<div style={{
|
|
padding: '8px 10px',
|
|
background: '#0a0a0a',
|
|
border: '1px solid #333',
|
|
borderRadius: '6px',
|
|
fontSize: '13px',
|
|
color: '#D4AF37',
|
|
fontFamily: 'monospace',
|
|
wordBreak: 'break-all',
|
|
}}>
|
|
{value}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CodeBlock({ text, label, copied, onCopy }: {
|
|
text: string;
|
|
label: string;
|
|
copied: string;
|
|
onCopy: (text: string, label: string) => void;
|
|
}) {
|
|
return (
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
}}>
|
|
<div style={{
|
|
flex: 1,
|
|
padding: '8px 10px',
|
|
background: '#0a0a0a',
|
|
border: '1px solid #333',
|
|
borderRadius: '6px',
|
|
fontSize: '13px',
|
|
color: '#4fc3f7',
|
|
fontFamily: 'monospace',
|
|
wordBreak: 'break-all',
|
|
overflow: 'hidden',
|
|
}}>
|
|
{text}
|
|
</div>
|
|
<button
|
|
onClick={() => onCopy(text, label)}
|
|
style={{
|
|
padding: '8px 12px',
|
|
borderRadius: '6px',
|
|
border: '1px solid #D4AF37',
|
|
background: copied === label ? '#D4AF37' : 'transparent',
|
|
color: copied === label ? '#000' : '#D4AF37',
|
|
fontSize: '12px',
|
|
cursor: 'pointer',
|
|
whiteSpace: 'nowrap',
|
|
transition: 'all 0.2s',
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
{copied === label ? '✓ Copied!' : 'Copy'}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CopyButton({ text, label, copied, onCopy }: {
|
|
text: string;
|
|
label: string;
|
|
copied: string;
|
|
onCopy: (text: string, label: string) => void;
|
|
}) {
|
|
return (
|
|
<button
|
|
onClick={() => onCopy(text, label)}
|
|
style={{
|
|
padding: '10px 16px',
|
|
borderRadius: '6px',
|
|
border: 'none',
|
|
background: copied === label ? '#D4AF37' : '#1a1a1a',
|
|
color: copied === label ? '#000' : '#D4AF37',
|
|
fontSize: '13px',
|
|
cursor: 'pointer',
|
|
fontWeight: 600,
|
|
width: '100%',
|
|
transition: 'all 0.2s',
|
|
}}
|
|
>
|
|
{copied === label ? '✓ Copied!' : '📋 Copy template'}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function EnvForm() {
|
|
const [ghId, setGhId] = useState('');
|
|
const [ghSecret, setGhSecret] = useState('');
|
|
const [glId, setGlId] = useState('');
|
|
const [glSecret, setGlSecret] = useState('');
|
|
const [apId, setApId] = useState('');
|
|
const [apSecret, setApSecret] = useState('');
|
|
const [submitted, setSubmitted] = useState(false);
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// Build the env var text for copying
|
|
const text = `# Paste these into your VPS:\ncd /root/falah-mobile\ncat >> .env << 'EOF'\nGOOGLE_CLIENT_ID="${glId}"\nGOOGLE_CLIENT_SECRET="${glSecret}"\nAPPLE_CLIENT_ID="${apId}"\nAPPLE_CLIENT_SECRET="${apSecret}"\nGITHUB_CLIENT_ID="${ghId}"\nGITHUB_CLIENT_SECRET="${ghSecret}"\nEOF\ndocker compose up -d --build`;
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
setSubmitted(true);
|
|
setTimeout(() => setSubmitted(false), 3000);
|
|
}).catch(() => setSubmitted(true));
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
|
<div style={{
|
|
background: '#0d0d0d',
|
|
border: '1px solid #333',
|
|
borderRadius: '8px',
|
|
padding: '12px',
|
|
}}>
|
|
<h4 style={{ color: '#fff', fontSize: '14px', marginBottom: '8px' }}>🐙 GitHub</h4>
|
|
<InputField label="Client ID" value={ghId} onChange={setGhId} placeholder="Iv1.xxxxxxxxxxxx" />
|
|
<InputField label="Client Secret" value={ghSecret} onChange={setGhSecret} placeholder="ghp_xxxxxxxx" secret />
|
|
</div>
|
|
|
|
<div style={{
|
|
background: '#0d0d0d',
|
|
border: '1px solid #333',
|
|
borderRadius: '8px',
|
|
padding: '12px',
|
|
}}>
|
|
<h4 style={{ color: '#fff', fontSize: '14px', marginBottom: '8px' }}>🔵 Google</h4>
|
|
<InputField label="Client ID" value={glId} onChange={setGlId} placeholder="xxxx.apps.googleusercontent.com" />
|
|
<InputField label="Client Secret" value={glSecret} onChange={setGlSecret} placeholder="GOCSPX-xxxxxxxx" secret />
|
|
</div>
|
|
|
|
<div style={{
|
|
background: '#0d0d0d',
|
|
border: '1px solid #333',
|
|
borderRadius: '8px',
|
|
padding: '12px',
|
|
}}>
|
|
<h4 style={{ color: '#fff', fontSize: '14px', marginBottom: '8px' }}>🍎 Apple</h4>
|
|
<InputField label="Service ID (Client ID)" value={apId} onChange={setApId} placeholder="com.falahos.auth" />
|
|
<InputField label="Client Secret (JWT)" value={apSecret} onChange={setApSecret} placeholder="(generated JWT)" secret />
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={!ghId && !glId && !apId}
|
|
style={{
|
|
padding: '14px',
|
|
borderRadius: '8px',
|
|
border: 'none',
|
|
background: '#D4AF37',
|
|
color: '#000',
|
|
fontSize: '15px',
|
|
fontWeight: 700,
|
|
cursor: 'pointer',
|
|
opacity: (!ghId && !glId && !apId) ? 0.5 : 1,
|
|
transition: 'all 0.2s',
|
|
}}
|
|
>
|
|
{submitted ? '✓ Copied to clipboard!' : '📋 Copy config & deploy command'}
|
|
</button>
|
|
|
|
<p style={{ fontSize: '12px', color: '#666', textAlign: 'center' }}>
|
|
This copies the deployment command to your clipboard. Send it to me on Telegram
|
|
and I'll run it on the VPS.
|
|
</p>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
function InputField({ label, value, onChange, placeholder, secret }: {
|
|
label: string;
|
|
value: string;
|
|
onChange: (v: string) => void;
|
|
placeholder: string;
|
|
secret?: boolean;
|
|
}) {
|
|
return (
|
|
<div style={{ marginBottom: '8px' }}>
|
|
<div style={{ fontSize: '12px', color: '#888', marginBottom: '2px' }}>{label}</div>
|
|
<input
|
|
type={secret ? 'password' : 'text'}
|
|
value={value}
|
|
onChange={e => onChange(e.target.value)}
|
|
placeholder={placeholder}
|
|
style={{
|
|
width: '100%',
|
|
padding: '8px 10px',
|
|
background: '#0a0a0a',
|
|
border: '1px solid #333',
|
|
borderRadius: '6px',
|
|
fontSize: '14px',
|
|
color: '#fff',
|
|
fontFamily: 'monospace',
|
|
outline: 'none',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|