completionId: cgen-1ba998caf2844fbda103e72ee7d595b4
cgen-1ba998caf2844fbda103e72ee7d595b4
This commit is contained in:
Builder.io
parent
91dc74b0ff
commit
68b3965586
1 changed files with 26 additions and 136 deletions
|
|
@ -1,154 +1,44 @@
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect } from "react";
|
||||||
|
import { useSearchParams } from "react-router-dom";
|
||||||
const API_BASE = import.meta.env.VITE_API_BASE || "";
|
|
||||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
|
||||||
import { useAuth } from "@/contexts/AuthContext";
|
|
||||||
import Layout from "@/components/Layout";
|
import Layout from "@/components/Layout";
|
||||||
import SEO from "@/components/SEO";
|
import SEO from "@/components/SEO";
|
||||||
import { Card, CardContent } from "@/components/ui/card";
|
import LoadingScreen from "@/components/LoadingScreen";
|
||||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
|
||||||
import { Loader, AlertTriangle, CheckCircle } from "lucide-react";
|
|
||||||
|
|
||||||
export default function DiscordOAuthCallback() {
|
export default function DiscordOAuthCallback() {
|
||||||
const navigate = useNavigate();
|
|
||||||
const [searchParams] = useSearchParams();
|
const [searchParams] = useSearchParams();
|
||||||
const { user, signIn } = useAuth();
|
|
||||||
|
|
||||||
const [status, setStatus] = useState<"loading" | "success" | "error">(
|
|
||||||
"loading",
|
|
||||||
);
|
|
||||||
const [message, setMessage] = useState("Connecting to Discord...");
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleCallback = async () => {
|
const code = searchParams.get("code");
|
||||||
const code = searchParams.get("code");
|
const state = searchParams.get("state");
|
||||||
const state = searchParams.get("state");
|
const error = searchParams.get("error");
|
||||||
const error = searchParams.get("error");
|
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
setStatus("error");
|
window.location.href = `/login?error=${error}`;
|
||||||
setMessage(`Discord authorization failed: ${error}`);
|
return;
|
||||||
return;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
if (!code) {
|
if (!code) {
|
||||||
setStatus("error");
|
window.location.href = "/login?error=no_code";
|
||||||
setMessage("No authorization code received from Discord");
|
return;
|
||||||
return;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
const params = new URLSearchParams({
|
||||||
setMessage("Processing authentication...");
|
code,
|
||||||
|
state: state || "/dashboard",
|
||||||
|
...(error && { error }),
|
||||||
|
});
|
||||||
|
|
||||||
// Call backend to handle OAuth exchange
|
window.location.href = `/api/discord/oauth/callback?${params.toString()}`;
|
||||||
const response = await fetch(`${API_BASE}/api/discord/oauth/callback`, {
|
}, [searchParams]);
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({
|
|
||||||
code,
|
|
||||||
state: state || "/dashboard",
|
|
||||||
}),
|
|
||||||
credentials: "include", // Include cookies in request
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
setStatus("error");
|
|
||||||
setMessage(data.message || "Failed to authenticate with Discord");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Success
|
|
||||||
setStatus("success");
|
|
||||||
setMessage(data.message || "Successfully authenticated!");
|
|
||||||
|
|
||||||
// Save session tokens to localStorage if provided
|
|
||||||
if (data.session?.access_token) {
|
|
||||||
localStorage.setItem("sb-access-token", data.session.access_token);
|
|
||||||
localStorage.setItem("sb-refresh-token", data.session.refresh_token);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Redirect to next page
|
|
||||||
const nextPath =
|
|
||||||
state && state.startsWith("/")
|
|
||||||
? state
|
|
||||||
: data.isNewUser
|
|
||||||
? "/onboarding"
|
|
||||||
: "/dashboard";
|
|
||||||
setTimeout(() => {
|
|
||||||
navigate(nextPath);
|
|
||||||
window.location.reload(); // Reload to pick up new auth context
|
|
||||||
}, 1500);
|
|
||||||
} catch (error) {
|
|
||||||
setStatus("error");
|
|
||||||
setMessage(
|
|
||||||
error instanceof Error
|
|
||||||
? error.message
|
|
||||||
: "An unexpected error occurred",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
handleCallback();
|
|
||||||
}, [searchParams, navigate]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<SEO title="Discord Authentication | AeThex" />
|
<SEO title="Discord Authentication | AeThex" />
|
||||||
|
<LoadingScreen
|
||||||
<div className="min-h-screen flex items-center justify-center pt-20 pb-12 px-4">
|
message="Completing Discord authentication..."
|
||||||
<Card className="bg-card/60 border-border/40 backdrop-blur max-w-md w-full">
|
showProgress
|
||||||
<CardContent className="pt-8 space-y-6">
|
duration={10000}
|
||||||
{status === "loading" && (
|
/>
|
||||||
<div className="flex flex-col items-center gap-4">
|
|
||||||
<Loader className="h-8 w-8 animate-spin text-blue-500" />
|
|
||||||
<div className="text-center space-y-2">
|
|
||||||
<p className="font-semibold text-foreground">{message}</p>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Please wait while we secure your account...
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{status === "success" && (
|
|
||||||
<div className="flex flex-col items-center gap-4">
|
|
||||||
<CheckCircle className="h-8 w-8 text-green-500" />
|
|
||||||
<div className="text-center space-y-2">
|
|
||||||
<p className="font-semibold text-foreground">{message}</p>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
You'll be taken to your dashboard shortly...
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{status === "error" && (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<AlertTriangle className="h-6 w-6 text-red-500 flex-shrink-0 mt-0.5" />
|
|
||||||
<div className="space-y-2">
|
|
||||||
<p className="font-semibold text-red-600">
|
|
||||||
Authentication Failed
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-red-500/80">{message}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<button
|
|
||||||
onClick={() => navigate("/login")}
|
|
||||||
className="flex-1 px-4 py-2 rounded-lg bg-primary hover:bg-primary/90 text-primary-foreground font-medium transition-colors"
|
|
||||||
>
|
|
||||||
Back to Login
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue