Fix: Use OAuth authorize flow, show login prompt instead of auto-redirect
This commit is contained in:
@@ -42,8 +42,8 @@ function AuthCallbackContent() {
|
||||
|
||||
processedRef.current = true
|
||||
|
||||
const storedState = localStorage.getItem('oauth_state')
|
||||
const codeVerifier = localStorage.getItem('oauth_code_verifier')
|
||||
const storedState = sessionStorage.getItem('oauth_state')
|
||||
const codeVerifier = sessionStorage.getItem('oauth_code_verifier')
|
||||
|
||||
if (state !== storedState) {
|
||||
console.error('State mismatch', { received: state, stored: storedState })
|
||||
@@ -53,7 +53,7 @@ function AuthCallbackContent() {
|
||||
|
||||
const exchangeCode = async () => {
|
||||
try {
|
||||
const authApiUrl = process.env.NEXT_PUBLIC_AUTH_API_URL || 'http://localhost:8081'
|
||||
const authApiUrl = process.env.NEXT_PUBLIC_AUTH_API_URL || 'https://auth-api.ciphera.net'
|
||||
const res = await fetch(`${authApiUrl}/oauth/token`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -83,8 +83,8 @@ function AuthCallbackContent() {
|
||||
totp_enabled: payload.totp_enabled || false
|
||||
})
|
||||
|
||||
localStorage.removeItem('oauth_state')
|
||||
localStorage.removeItem('oauth_code_verifier')
|
||||
sessionStorage.removeItem('oauth_state')
|
||||
sessionStorage.removeItem('oauth_code_verifier')
|
||||
|
||||
router.push('/')
|
||||
} catch (err: any) {
|
||||
|
||||
42
app/page.tsx
42
app/page.tsx
@@ -1,29 +1,47 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useAuth } from '@/lib/auth/context'
|
||||
import { listSites } from '@/lib/api/sites'
|
||||
import type { Site } from '@/lib/api/sites'
|
||||
import { initiateOAuthFlow } from '@/lib/api/oauth'
|
||||
import LoadingOverlay from '@/components/LoadingOverlay'
|
||||
import SiteList from '@/components/sites/SiteList'
|
||||
|
||||
export default function HomePage() {
|
||||
const { user, loading } = useAuth()
|
||||
const router = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && !user) {
|
||||
router.push('/login')
|
||||
}
|
||||
}, [user, loading, router])
|
||||
|
||||
if (loading) {
|
||||
return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Ciphera Analytics" />
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return null
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="max-w-2xl mx-auto text-center py-16">
|
||||
<h1 className="text-4xl font-bold text-neutral-900 dark:text-white mb-4">
|
||||
Welcome to Ciphera Analytics
|
||||
</h1>
|
||||
<p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8">
|
||||
Privacy-first web analytics. No cookies, no tracking. GDPR compliant.
|
||||
</p>
|
||||
<div className="flex gap-4 justify-center">
|
||||
<button
|
||||
onClick={() => initiateOAuthFlow()}
|
||||
className="btn-primary"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
const authUrl = process.env.NEXT_PUBLIC_AUTH_URL || 'https://auth.ciphera.net'
|
||||
window.location.href = `${authUrl}/signup?client_id=analytics-app&redirect_uri=${encodeURIComponent((process.env.NEXT_PUBLIC_APP_URL || window.location.origin) + '/auth/callback')}&response_type=code`
|
||||
}}
|
||||
className="btn-secondary"
|
||||
>
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
65
lib/api/oauth.ts
Normal file
65
lib/api/oauth.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* OAuth 2.0 PKCE utilities
|
||||
*/
|
||||
|
||||
function generateRandomString(length: number): string {
|
||||
const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~'
|
||||
const values = new Uint8Array(length)
|
||||
crypto.getRandomValues(values)
|
||||
return Array.from(values, (x) => charset[x % charset.length]).join('')
|
||||
}
|
||||
|
||||
async function generateCodeChallenge(codeVerifier: string): Promise<string> {
|
||||
const encoder = new TextEncoder()
|
||||
const data = encoder.encode(codeVerifier)
|
||||
const digest = await crypto.subtle.digest('SHA-256', data)
|
||||
|
||||
// Convert ArrayBuffer to Base64URL string
|
||||
return btoa(String.fromCharCode(...new Uint8Array(digest)))
|
||||
.replace(/\+/g, '-')
|
||||
.replace(/\//g, '_')
|
||||
.replace(/=+$/, '')
|
||||
}
|
||||
|
||||
export interface OAuthParams {
|
||||
state: string
|
||||
codeVerifier: string
|
||||
codeChallenge: string
|
||||
}
|
||||
|
||||
export async function generateOAuthParams(): Promise<OAuthParams> {
|
||||
const state = generateRandomString(32)
|
||||
const codeVerifier = generateRandomString(64)
|
||||
const codeChallenge = await generateCodeChallenge(codeVerifier)
|
||||
|
||||
return {
|
||||
state,
|
||||
codeVerifier,
|
||||
codeChallenge
|
||||
}
|
||||
}
|
||||
|
||||
export async function initiateOAuthFlow(redirectPath = '/auth/callback') {
|
||||
if (typeof window === 'undefined') return
|
||||
|
||||
const params = await generateOAuthParams()
|
||||
const redirectUri = `${window.location.origin}${redirectPath}`
|
||||
|
||||
// Store PKCE params in sessionStorage for later use
|
||||
sessionStorage.setItem('oauth_state', params.state)
|
||||
sessionStorage.setItem('oauth_code_verifier', params.codeVerifier)
|
||||
|
||||
const authUrl = process.env.NEXT_PUBLIC_AUTH_URL || 'https://auth.ciphera.net'
|
||||
const authApiUrl = process.env.NEXT_PUBLIC_AUTH_API_URL || 'https://auth-api.ciphera.net'
|
||||
|
||||
// Redirect to OAuth authorize endpoint
|
||||
const authorizeUrl = new URL(`${authApiUrl}/oauth/authorize`)
|
||||
authorizeUrl.searchParams.set('client_id', 'analytics-app')
|
||||
authorizeUrl.searchParams.set('redirect_uri', redirectUri)
|
||||
authorizeUrl.searchParams.set('response_type', 'code')
|
||||
authorizeUrl.searchParams.set('state', params.state)
|
||||
authorizeUrl.searchParams.set('code_challenge', params.codeChallenge)
|
||||
authorizeUrl.searchParams.set('code_challenge_method', 'S256')
|
||||
|
||||
window.location.href = authorizeUrl.toString()
|
||||
}
|
||||
@@ -7,23 +7,12 @@ const nextConfig: NextConfig = {
|
||||
// * Privacy-first: Disable analytics and telemetry
|
||||
productionBrowserSourceMaps: false,
|
||||
async redirects() {
|
||||
const authUrl = process.env.NEXT_PUBLIC_AUTH_URL || 'https://auth.ciphera.net'
|
||||
return [
|
||||
{
|
||||
source: '/dashboard',
|
||||
destination: '/',
|
||||
permanent: false,
|
||||
},
|
||||
{
|
||||
source: '/login',
|
||||
destination: `${authUrl}/login?client_id=analytics-app&redirect_uri=${encodeURIComponent((process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003') + '/auth/callback')}&response_type=code`,
|
||||
permanent: false,
|
||||
},
|
||||
{
|
||||
source: '/signup',
|
||||
destination: `${authUrl}/signup?client_id=analytics-app&redirect_uri=${encodeURIComponent((process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003') + '/auth/callback')}&response_type=code`,
|
||||
permanent: false,
|
||||
},
|
||||
]
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user