mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-09 20:27:44 +00:00
feat: OIDC Plugin (#765)
This commit is contained in:
Bereket Engida
114
demo/nextjs/app/apps/register/page.tsx
Normal file
114
demo/nextjs/app/apps/register/page.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { AlertCircle, Loader2 } from "lucide-react";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { client } from "@/lib/auth-client";
|
||||
|
||||
export default function RegisterOAuthClient() {
|
||||
const [name, setName] = useState("");
|
||||
const [logo, setLogo] = useState<File | null>(null);
|
||||
const [redirectUri, setRedirectUri] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const router = useRouter();
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
if (!name || !logo || !redirectUri) {
|
||||
setError("All fields are required");
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
const res = await client.oauth2.registerClient({
|
||||
name,
|
||||
icon: await convertImageToBase64(logo),
|
||||
redirectURLs: [redirectUri],
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-10">
|
||||
<Card className="max-w-md mx-auto">
|
||||
<CardHeader>
|
||||
<CardTitle>Register OAuth Client</CardTitle>
|
||||
<CardDescription>
|
||||
Provide details to register a new OAuth client as a provider.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Enter client name"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="logo">Logo</Label>
|
||||
<Input
|
||||
id="logo"
|
||||
type="file"
|
||||
onChange={(e) => setLogo(e.target.files?.[0] || null)}
|
||||
accept="image/*"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="redirectUri">Redirect URI</Label>
|
||||
<Input
|
||||
id="redirectUri"
|
||||
value={redirectUri}
|
||||
onChange={(e) => setRedirectUri(e.target.value)}
|
||||
placeholder="https://your-app.com/callback"
|
||||
/>
|
||||
</div>
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Registering...
|
||||
</>
|
||||
) : (
|
||||
"Register Client"
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
async function convertImageToBase64(file: File): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => resolve(reader.result as string);
|
||||
reader.onerror = reject;
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
47
demo/nextjs/app/oauth/authorize/concet-buttons.tsx
Normal file
47
demo/nextjs/app/oauth/authorize/concet-buttons.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardFooter } from "@/components/ui/card";
|
||||
import { client } from "@/lib/auth-client";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export function ConsentBtns() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
return (
|
||||
<CardFooter className="flex items-center gap-2">
|
||||
<Button
|
||||
onClick={async () => {
|
||||
setLoading(true);
|
||||
const res = await client.oauth2.consent({
|
||||
accept: true,
|
||||
});
|
||||
setLoading(false);
|
||||
if (res.data?.redirectURI) {
|
||||
window.location.href = res.data.redirectURI;
|
||||
return;
|
||||
}
|
||||
toast.error("Failed to authorize");
|
||||
}}
|
||||
>
|
||||
{loading ? <Loader2 size={15} className="animate-spin" /> : "Authorize"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={async () => {
|
||||
const res = await client.oauth2.consent({
|
||||
accept: false,
|
||||
});
|
||||
if (res.data?.redirectURI) {
|
||||
window.location.href = res.data.redirectURI;
|
||||
return;
|
||||
}
|
||||
toast.error("Failed to cancel");
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</CardFooter>
|
||||
);
|
||||
}
|
||||
114
demo/nextjs/app/oauth/authorize/page.tsx
Normal file
114
demo/nextjs/app/oauth/authorize/page.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import { Metadata } from "next";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { headers } from "next/headers";
|
||||
import { ArrowLeftRight, ArrowUpRight, Mail, Users } from "lucide-react";
|
||||
import { Card, CardContent, CardFooter } from "@/components/ui/card";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Logo } from "@/components/logo";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ConsentBtns } from "./concet-buttons";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Authorize Application",
|
||||
description: "Grant access to your account",
|
||||
};
|
||||
|
||||
interface AuthorizePageProps {
|
||||
searchParams: Promise<{
|
||||
redirect_uri: string;
|
||||
scope: string;
|
||||
cancel_uri: string;
|
||||
client_id: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export default async function AuthorizePage({
|
||||
searchParams,
|
||||
}: AuthorizePageProps) {
|
||||
const { redirect_uri, scope, client_id, cancel_uri } = await searchParams;
|
||||
const session = await auth.api.getSession({
|
||||
headers: await headers(),
|
||||
});
|
||||
const clientDetails = await auth.api.getOAuthClient({
|
||||
params: {
|
||||
id: client_id,
|
||||
},
|
||||
headers: await headers(),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-10">
|
||||
<h1 className="text-2xl font-bold mb-6 text-center">
|
||||
Authorize Application
|
||||
</h1>
|
||||
<div className="min-h-screen bg-black text-white flex flex-col">
|
||||
<div className="flex flex-col items-center justify-center max-w-2xl mx-auto px-4">
|
||||
<div className="flex items-center gap-8 mb-8">
|
||||
<div className="w-16 h-16 border rounded-full flex items-center justify-center">
|
||||
{clientDetails.icon ? (
|
||||
<Image
|
||||
src={clientDetails.icon}
|
||||
alt="App Logo"
|
||||
className="object-cover"
|
||||
width={64}
|
||||
height={64}
|
||||
/>
|
||||
) : (
|
||||
<Logo />
|
||||
)}
|
||||
</div>
|
||||
<ArrowLeftRight className="h-6 w-6" />
|
||||
<div className="w-16 h-16 rounded-full overflow-hidden">
|
||||
<Avatar className="hidden h-16 w-16 sm:flex ">
|
||||
<AvatarImage
|
||||
src={session?.user.image || "#"}
|
||||
alt="Avatar"
|
||||
className="object-cover"
|
||||
/>
|
||||
<AvatarFallback>{session?.user.name.charAt(0)}</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="text-3xl font-semibold text-center mb-8">
|
||||
{clientDetails.name} is requesting access to your Better Auth
|
||||
account
|
||||
</h1>
|
||||
|
||||
<Card className="w-full bg-zinc-900 border-zinc-800 rounded-none">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between p-4 bg-zinc-800 rounded-lg mb-6">
|
||||
<div>
|
||||
<div className="font-medium">{session?.user.name}</div>
|
||||
<div className="text-zinc-400">{session?.user.email}</div>
|
||||
</div>
|
||||
<ArrowUpRight className="h-5 w-5 text-zinc-400" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-lg mb-4">
|
||||
Continuing will allow Sign in with {clientDetails.name} to:
|
||||
</div>
|
||||
{scope.includes("profile") && (
|
||||
<div className="flex items-center gap-3 text-zinc-300">
|
||||
<Users className="h-5 w-5" />
|
||||
<span>Read your Better Auth user data.</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{scope.includes("email") && (
|
||||
<div className="flex items-center gap-3 text-zinc-300">
|
||||
<Mail className="h-5 w-5" />
|
||||
<span>Read your email address.</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
<ConsentBtns />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user