mirror of
https://github.com/fosrl/pangolin.git
synced 2026-02-04 17:09:30 +00:00
added support for pin code auth
This commit is contained in:
Milo Schwartz
@@ -12,7 +12,9 @@ type AuthLayoutProps = {
|
||||
export default async function AuthLayout({ children }: AuthLayoutProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="p-3 md:mt-32">{children}</div>
|
||||
<div className="w-full max-w-md mx-auto p-3 md:mt-32">
|
||||
{children}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function DashboardLoginForm({
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-md mx-auto">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>Login</CardTitle>
|
||||
<CardDescription>
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@app/components/ui/card";
|
||||
|
||||
export default async function ResourceAccessDenied() {
|
||||
return (
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-center text-2xl font-bold">
|
||||
Access Denied
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
You're not alowed to access this resource. If this is a mistake,
|
||||
please contact the administrator.
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,374 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import * as z from "zod";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { LockIcon, UserIcon, Binary, Key, User } from "lucide-react";
|
||||
import {
|
||||
InputOTP,
|
||||
InputOTPGroup,
|
||||
InputOTPSlot,
|
||||
} from "@app/components/ui/input-otp";
|
||||
import api from "@app/api";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Alert, AlertDescription } from "@app/components/ui/alert";
|
||||
import { formatAxiosError } from "@app/lib/utils";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { LoginResponse } from "@server/routers/auth";
|
||||
import ResourceAccessDenied from "./ResourceAccessDenied";
|
||||
import LoginForm from "@app/components/LoginForm";
|
||||
|
||||
const pinSchema = z.object({
|
||||
pin: z
|
||||
.string()
|
||||
.length(6, { message: "PIN must be exactly 6 digits" })
|
||||
.regex(/^\d+$/, { message: "PIN must only contain numbers" }),
|
||||
});
|
||||
|
||||
const passwordSchema = z.object({
|
||||
password: z
|
||||
.string()
|
||||
.min(1, { message: "Password must be at least 1 character long" }),
|
||||
});
|
||||
|
||||
type ResourceAuthPortalProps = {
|
||||
methods: {
|
||||
password: boolean;
|
||||
pincode: boolean;
|
||||
sso: boolean;
|
||||
};
|
||||
resource: {
|
||||
name: string;
|
||||
id: number;
|
||||
};
|
||||
redirect: string;
|
||||
};
|
||||
|
||||
export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||
const router = useRouter();
|
||||
|
||||
const [passwordError, setPasswordError] = useState<string | null>(null);
|
||||
const [pincodeError, setPincodeError] = useState<string | null>(null);
|
||||
const [accessDenied, setAccessDenied] = useState<boolean>(false);
|
||||
const [loadingLogin, setLoadingLogin] = useState(false);
|
||||
|
||||
function getDefaultSelectedMethod() {
|
||||
if (props.methods.sso) {
|
||||
return "sso";
|
||||
}
|
||||
|
||||
if (props.methods.password) {
|
||||
return "password";
|
||||
}
|
||||
|
||||
if (props.methods.pincode) {
|
||||
return "pin";
|
||||
}
|
||||
}
|
||||
|
||||
const [activeTab, setActiveTab] = useState(getDefaultSelectedMethod());
|
||||
|
||||
const getColLength = () => {
|
||||
let colLength = 0;
|
||||
if (props.methods.pincode) colLength++;
|
||||
if (props.methods.password) colLength++;
|
||||
if (props.methods.sso) colLength++;
|
||||
return colLength;
|
||||
};
|
||||
|
||||
const [numMethods, setNumMethods] = useState(getColLength());
|
||||
|
||||
const pinForm = useForm<z.infer<typeof pinSchema>>({
|
||||
resolver: zodResolver(pinSchema),
|
||||
defaultValues: {
|
||||
pin: "",
|
||||
},
|
||||
});
|
||||
|
||||
const passwordForm = useForm<z.infer<typeof passwordSchema>>({
|
||||
resolver: zodResolver(passwordSchema),
|
||||
defaultValues: {
|
||||
password: "",
|
||||
},
|
||||
});
|
||||
|
||||
const onPinSubmit = (values: z.infer<typeof pinSchema>) => {
|
||||
setLoadingLogin(true);
|
||||
api.post(`/resource/${props.resource.id}/auth/pincode`, {
|
||||
pincode: values.pin,
|
||||
})
|
||||
.then((res) => {
|
||||
window.location.href = props.redirect;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
setPincodeError(
|
||||
formatAxiosError(e, "Failed to authenticate with pincode"),
|
||||
);
|
||||
})
|
||||
.then(() => setLoadingLogin(false));
|
||||
};
|
||||
|
||||
const onPasswordSubmit = (values: z.infer<typeof passwordSchema>) => {
|
||||
setLoadingLogin(true);
|
||||
api.post(`/resource/${props.resource.id}/auth/password`, {
|
||||
password: values.password,
|
||||
})
|
||||
.then((res) => {
|
||||
window.location.href = props.redirect;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
setPasswordError(
|
||||
formatAxiosError(e, "Failed to authenticate with password"),
|
||||
);
|
||||
})
|
||||
.finally(() => setLoadingLogin(false));
|
||||
};
|
||||
|
||||
async function handleSSOAuth() {
|
||||
console.log("SSO authentication");
|
||||
|
||||
await api.get(`/resource/${props.resource.id}`).catch((e) => {
|
||||
setAccessDenied(true);
|
||||
});
|
||||
|
||||
if (!accessDenied) {
|
||||
window.location.href = props.redirect;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{!accessDenied ? (
|
||||
<div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Authentication Required</CardTitle>
|
||||
<CardDescription>
|
||||
{numMethods > 1
|
||||
? `Choose your preferred method to access ${props.resource.name}`
|
||||
: `You must authenticate to access ${props.resource.name}`}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={setActiveTab}
|
||||
>
|
||||
{numMethods > 1 && (
|
||||
<TabsList
|
||||
className={`grid w-full grid-cols-${numMethods}`}
|
||||
>
|
||||
{props.methods.pincode && (
|
||||
<TabsTrigger value="pin">
|
||||
<Binary className="w-4 h-4 mr-1" />{" "}
|
||||
PIN
|
||||
</TabsTrigger>
|
||||
)}
|
||||
{props.methods.password && (
|
||||
<TabsTrigger value="password">
|
||||
<Key className="w-4 h-4 mr-1" />{" "}
|
||||
Password
|
||||
</TabsTrigger>
|
||||
)}
|
||||
{props.methods.sso && (
|
||||
<TabsTrigger value="sso">
|
||||
<User className="w-4 h-4 mr-1" />{" "}
|
||||
User
|
||||
</TabsTrigger>
|
||||
)}
|
||||
</TabsList>
|
||||
)}
|
||||
{props.methods.pincode && (
|
||||
<TabsContent
|
||||
value="pin"
|
||||
className={`${numMethods <= 1 ? "mt-0" : ""}`}
|
||||
>
|
||||
<Form {...pinForm}>
|
||||
<form
|
||||
onSubmit={pinForm.handleSubmit(
|
||||
onPinSubmit,
|
||||
)}
|
||||
className="space-y-4"
|
||||
>
|
||||
<FormField
|
||||
control={pinForm.control}
|
||||
name="pin"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
6-digit PIN Code
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<div className="flex justify-center">
|
||||
<InputOTP
|
||||
maxLength={
|
||||
6
|
||||
}
|
||||
{...field}
|
||||
>
|
||||
<InputOTPGroup className="flex">
|
||||
<InputOTPSlot
|
||||
index={
|
||||
0
|
||||
}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
index={
|
||||
1
|
||||
}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
index={
|
||||
2
|
||||
}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
index={
|
||||
3
|
||||
}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
index={
|
||||
4
|
||||
}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
index={
|
||||
5
|
||||
}
|
||||
/>
|
||||
</InputOTPGroup>
|
||||
</InputOTP>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{pincodeError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{pincodeError}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
loading={loadingLogin}
|
||||
disabled={loadingLogin}
|
||||
>
|
||||
<LockIcon className="w-4 h-4 mr-2" />
|
||||
Login with PIN
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</TabsContent>
|
||||
)}
|
||||
{props.methods.password && (
|
||||
<TabsContent
|
||||
value="password"
|
||||
className={`${numMethods <= 1 ? "mt-0" : ""}`}
|
||||
>
|
||||
<Form {...passwordForm}>
|
||||
<form
|
||||
onSubmit={passwordForm.handleSubmit(
|
||||
onPasswordSubmit,
|
||||
)}
|
||||
className="space-y-4"
|
||||
>
|
||||
<FormField
|
||||
control={
|
||||
passwordForm.control
|
||||
}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
Password
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Enter password"
|
||||
type="password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{passwordError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{passwordError}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
loading={loadingLogin}
|
||||
disabled={loadingLogin}
|
||||
>
|
||||
<LockIcon className="w-4 h-4 mr-2" />
|
||||
Login with Password
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</TabsContent>
|
||||
)}
|
||||
{props.methods.sso && (
|
||||
<TabsContent
|
||||
value="sso"
|
||||
className={`${numMethods <= 1 ? "mt-0" : ""}`}
|
||||
>
|
||||
<LoginForm
|
||||
onLogin={async () =>
|
||||
await handleSSOAuth()
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
)}
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* {activeTab === "sso" && (
|
||||
<div className="flex justify-center mt-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Don't have an account?{" "}
|
||||
<a href="#" className="underline">
|
||||
Sign up
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
)} */}
|
||||
</div>
|
||||
) : (
|
||||
<ResourceAccessDenied />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@app/components/ui/card";
|
||||
|
||||
export default async function ResourceNotFound() {
|
||||
return (
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-center text-2xl font-bold">
|
||||
Resource Not Found
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
The resource you're trying to access does not exist
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
100
src/app/auth/resource/[resourceId]/page.tsx
Normal file
100
src/app/auth/resource/[resourceId]/page.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import {
|
||||
GetResourceAuthInfoResponse,
|
||||
GetResourceResponse,
|
||||
} from "@server/routers/resource";
|
||||
import ResourceAuthPortal from "./components/ResourceAuthPortal";
|
||||
import { internal } from "@app/api";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { authCookieHeader } from "@app/api/cookies";
|
||||
import { cache } from "react";
|
||||
import { verifySession } from "@app/lib/auth/verifySession";
|
||||
import { redirect } from "next/navigation";
|
||||
import ResourceNotFound from "./components/ResourceNotFound";
|
||||
import ResourceAccessDenied from "./components/ResourceAccessDenied";
|
||||
|
||||
export default async function ResourceAuthPage(props: {
|
||||
params: Promise<{ resourceId: number }>;
|
||||
searchParams: Promise<{ r: string }>;
|
||||
}) {
|
||||
const params = await props.params;
|
||||
const searchParams = await props.searchParams;
|
||||
|
||||
let authInfo: GetResourceAuthInfoResponse | undefined;
|
||||
try {
|
||||
const res = await internal.get<
|
||||
AxiosResponse<GetResourceAuthInfoResponse>
|
||||
>(`/resource/${params.resourceId}/auth`, await authCookieHeader());
|
||||
|
||||
if (res && res.status === 200) {
|
||||
authInfo = res.data.data;
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
const getUser = cache(verifySession);
|
||||
const user = await getUser();
|
||||
|
||||
if (!authInfo) {
|
||||
return (
|
||||
<div className="w-full max-w-md">
|
||||
<ResourceNotFound />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const hasAuth = authInfo.password || authInfo.pincode || authInfo.sso;
|
||||
const isSSOOnly = authInfo.sso && !authInfo.password && !authInfo.pincode;
|
||||
|
||||
const redirectUrl = searchParams.r || authInfo.url;
|
||||
|
||||
if (!hasAuth) {
|
||||
redirect(redirectUrl);
|
||||
}
|
||||
|
||||
let userIsUnauthorized = false;
|
||||
if (user && authInfo.sso) {
|
||||
let doRedirect = false;
|
||||
try {
|
||||
const res = await internal.get<AxiosResponse<GetResourceResponse>>(
|
||||
`/resource/${params.resourceId}`,
|
||||
await authCookieHeader(),
|
||||
);
|
||||
|
||||
console.log(res.data);
|
||||
doRedirect = true;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
userIsUnauthorized = true;
|
||||
}
|
||||
|
||||
if (doRedirect) {
|
||||
redirect(redirectUrl);
|
||||
}
|
||||
}
|
||||
|
||||
if (userIsUnauthorized && isSSOOnly) {
|
||||
return (
|
||||
<div className="w-full max-w-md">
|
||||
<ResourceAccessDenied />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full max-w-md">
|
||||
<ResourceAuthPortal
|
||||
methods={{
|
||||
password: authInfo.password,
|
||||
pincode: authInfo.pincode,
|
||||
sso: authInfo.sso && !userIsUnauthorized,
|
||||
}}
|
||||
resource={{
|
||||
name: authInfo.resourceName,
|
||||
id: authInfo.resourceId,
|
||||
}}
|
||||
redirect={redirectUrl}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -100,7 +100,7 @@ export default function SignupForm({ redirect }: SignupFormProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-md mx-auto">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>Create Account</CardTitle>
|
||||
<CardDescription>
|
||||
|
||||
@@ -123,7 +123,7 @@ export default function VerifyEmailForm({
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card className="w-full max-w-md mx-auto">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>Verify Your Email</CardTitle>
|
||||
<CardDescription>
|
||||
|
||||
Reference in New Issue
Block a user