added oauth Route
This commit is contained in:
PxlLoewe
27
apps/hub/app/(auth)/layout.tsx
Normal file
27
apps/hub/app/(auth)/layout.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import { NextPage } from 'next';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
const AuthLayout: NextPage<
|
||||
Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>
|
||||
> = ({ children }) => (
|
||||
<div
|
||||
className="hero min-h-screen"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)',
|
||||
}}
|
||||
>
|
||||
<div className="hero-overlay bg-opacity-60"></div>
|
||||
<div className="hero-content text-neutral-content text-center ">
|
||||
<div className="max-w-lg">
|
||||
<div className="card bg-base-100 w-full min-w-[500px] shadow-2xl max-md:min-w-[400px]">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default AuthLayout;
|
||||
@@ -7,13 +7,12 @@ import { useForm } from 'react-hook-form';
|
||||
import { Toaster, toast } from 'react-hot-toast';
|
||||
import { z } from 'zod';
|
||||
|
||||
|
||||
export const Login = () => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const schema = z.object({
|
||||
email: z.string().email(),
|
||||
password: z.string().min(6),
|
||||
password: z.string(),
|
||||
});
|
||||
|
||||
type schemaType = z.infer<typeof schema>;
|
||||
@@ -28,29 +27,25 @@ export const Login = () => {
|
||||
onSubmit={form.handleSubmit(async () => {
|
||||
setIsLoading(true);
|
||||
const data = await signIn('credentials', {
|
||||
redirect: false,
|
||||
callbackUrl: '/',
|
||||
email: form.getValues('email'),
|
||||
password: form.getValues('password'),
|
||||
});
|
||||
if (!data || data.error) {
|
||||
toast.error("E-Mail / Passwort ist falsch!",
|
||||
{
|
||||
style: {
|
||||
background: 'var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity, 1)))',
|
||||
color: 'var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))'
|
||||
}
|
||||
}
|
||||
)
|
||||
toast.error('E-Mail / Passwort ist falsch!', {
|
||||
style: {
|
||||
background:
|
||||
'var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity, 1)))',
|
||||
color:
|
||||
'var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))',
|
||||
},
|
||||
});
|
||||
}
|
||||
console.log(data);
|
||||
setIsLoading(false);
|
||||
})}
|
||||
>
|
||||
<div>
|
||||
<Toaster
|
||||
position="top-center"
|
||||
reverseOrder={false}
|
||||
/>
|
||||
<Toaster position="top-center" reverseOrder={false} />
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold">Login</h1>
|
||||
<span className="text-sm font-medium">
|
||||
@@ -60,55 +55,60 @@ export const Login = () => {
|
||||
</Link>
|
||||
</span>
|
||||
<label className="input input-bordered flex items-center gap-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
className="h-4 w-4 opacity-70"
|
||||
>
|
||||
<path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
|
||||
<path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
className="grow"
|
||||
{...form.register('email')}
|
||||
placeholder="Email"
|
||||
/>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
className="h-4 w-4 opacity-70"
|
||||
>
|
||||
<path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
|
||||
<path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
className="grow"
|
||||
{...form.register('email')}
|
||||
placeholder="Email"
|
||||
/>
|
||||
</label>
|
||||
<p className="text-error">
|
||||
{typeof form.formState.errors.email?.message === 'string'
|
||||
? form.formState.errors.email.message
|
||||
: ''}
|
||||
</p>
|
||||
<label className="input input-bordered flex items-center gap-2 mt-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
className="h-4 w-4 opacity-70"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<input
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
{...form.register('password')}
|
||||
placeholder="Passwort"
|
||||
className="grow"
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
className="h-4 w-4 opacity-70"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</label>
|
||||
</svg>
|
||||
<input
|
||||
autoComplete="current-password"
|
||||
type="password"
|
||||
{...form.register('password')}
|
||||
placeholder="Passwort"
|
||||
className="grow"
|
||||
/>
|
||||
</label>
|
||||
<div className="form-control mt-6">
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
name="loginBtn"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading && (
|
||||
<span className="loading loading-spinner loading-sm"></span>
|
||||
)}
|
||||
Login{isLoading && '...'}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
name="loginBtn"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading && (
|
||||
<span className="loading loading-spinner loading-sm"></span>
|
||||
)}
|
||||
Login{isLoading && '...'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,23 +2,8 @@ import { Login } from './_components/Login';
|
||||
|
||||
export default async () => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="hero min-h-screen"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)',
|
||||
}}
|
||||
>
|
||||
<div className="hero-overlay bg-opacity-60"></div>
|
||||
<div className="hero-content text-neutral-content text-center ">
|
||||
<div className="max-w-lg">
|
||||
<div className="card bg-base-100 w-full min-w-[500px] shadow-2xl max-md:min-w-[400px]">
|
||||
<Login />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
<>
|
||||
<Login />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -9,7 +9,7 @@ export default () => {
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div>
|
||||
<div className="card-body">
|
||||
<h1 className="text-5xl">logging out...</h1>
|
||||
</div>
|
||||
);
|
||||
|
||||
43
apps/hub/app/(auth)/oauth/_components/Authorize.tsx
Normal file
43
apps/hub/app/(auth)/oauth/_components/Authorize.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
'use client';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { Service } from '../page';
|
||||
import { generateToken } from './action';
|
||||
|
||||
export const Authorize = ({ service }: { service: Service }) => {
|
||||
const searchParams = useSearchParams();
|
||||
const legitimeUrl = service.approvedUrls.some((url) =>
|
||||
searchParams.get('redirect_uri')?.startsWith(url)
|
||||
);
|
||||
if (!legitimeUrl)
|
||||
return (
|
||||
<div className="card-body">
|
||||
<h1 className="text-4xl font-bold">Unerlaubter Zugriff</h1>
|
||||
<p>Du greifst von einem ncith genehmigtem Server auf diese URL zu</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<form className="card-body" onSubmit={(e) => e.preventDefault()}>
|
||||
<h1 className="text-4xl font-bold">Zugriff zulassen</h1>
|
||||
<p>
|
||||
Die Anwendung <strong>{service.name}</strong> möchte auf deine Daten
|
||||
zugreifen.
|
||||
</p>
|
||||
<div className="space-x-4">
|
||||
<button type="button" className="btn">
|
||||
Verweigern
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
onClick={async () => {
|
||||
const code = await generateToken(service);
|
||||
window.location.href = `${searchParams.get('redirect_uri')}?code=${code}`;
|
||||
}}
|
||||
>
|
||||
Zulassen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
24
apps/hub/app/(auth)/oauth/_components/action.ts
Normal file
24
apps/hub/app/(auth)/oauth/_components/action.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
'use server';
|
||||
import { getServerSession } from '../../../api/auth/[...nextauth]/auth';
|
||||
import { Service } from '../page';
|
||||
import { PrismaClient } from '@repo/db';
|
||||
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
export const generateToken = async (service: Service) => {
|
||||
const session = await getServerSession();
|
||||
if (!session) return null;
|
||||
|
||||
const accessToken = Array.from({ length: 10 }, () =>
|
||||
Math.floor(Math.random() * 10)
|
||||
).join('');
|
||||
|
||||
const code = await prisma.oAuthToken.create({
|
||||
data: {
|
||||
clientId: service.id,
|
||||
userId: session.user.id,
|
||||
accessToken: accessToken,
|
||||
},
|
||||
});
|
||||
return code;
|
||||
};
|
||||
26
apps/hub/app/(auth)/oauth/page.tsx
Normal file
26
apps/hub/app/(auth)/oauth/page.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Authorize } from './_components/Authorize';
|
||||
|
||||
export const services = [
|
||||
{
|
||||
id: '123456',
|
||||
service: 'dispatch',
|
||||
name: 'Leitstellendisposition',
|
||||
approvedUrls: ['http://localhost:3001'],
|
||||
},
|
||||
];
|
||||
export type Service = (typeof services)[number];
|
||||
|
||||
export default async ({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
|
||||
}) => {
|
||||
const { service: serviceId } = await searchParams;
|
||||
const service = services.find((service) => service.id === serviceId);
|
||||
|
||||
if (!service) {
|
||||
return <div>Service not found</div>;
|
||||
}
|
||||
|
||||
return <Authorize service={service} />;
|
||||
};
|
||||
@@ -17,8 +17,8 @@ export const Register = () => {
|
||||
}),
|
||||
firstname: z.string().min(2).max(30),
|
||||
lastname: z.string().min(2).max(30),
|
||||
password: z.string().min(6),
|
||||
passwordConfirm: z.string().min(6),
|
||||
password: z.string(),
|
||||
passwordConfirm: z.string(),
|
||||
})
|
||||
.superRefine(({ password, passwordConfirm }, ctx) => {
|
||||
if (password !== passwordConfirm) {
|
||||
|
||||
@@ -3,22 +3,7 @@ import { Register } from './_components/Register';
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="hero min-h-screen"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)',
|
||||
}}
|
||||
>
|
||||
<div className="hero-overlay bg-opacity-60"></div>
|
||||
<div className="hero-content text-neutral-content text-center ">
|
||||
<div className="max-w-lg">
|
||||
<div className="card bg-base-100 w-full min-w-[500px] shadow-2xl max-md:min-w-[400px]">
|
||||
<Register />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Register />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user