admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

fix ts errors on sign-in page

Browse source
This commit is contained in:
MarconLP 2023-04-11 00:16:06 +02:00
parent 5b5a80e1b1
commit fbcf0fdb89
No known key found for this signature in database
GPG key ID: F4CAFFDFA3451D5E
1 changed files with 27 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
src/pages/sign-in.tsx
View file

@ -1,21 +1,16 @@
import { GetServerSideProps, type NextPage } from "next"; import {
type GetServerSidePropsContext,
type InferGetServerSidePropsType,
} from "next";
import Head from "next/head"; import Head from "next/head";
import { api } from "~/utils/api";
import { type AppProps } from "next/app";
import { getProviders, signIn } from "next-auth/react"; import { getProviders, signIn } from "next-auth/react";
import { getServerSession } from "next-auth"; import { getServerSession } from "next-auth";
import { authOptions } from "~/server/auth"; import { authOptions } from "~/server/auth";
interface Props { const SignIn = ({
providers: AppProps; providers,
} }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
const SignIn: NextPage = ({ providers }: Props) => {
const hello = api.example.hello.useQuery({ text: "from tRPC" });
console.log(providers);
return ( return (
<> <>
<Head> <Head>
@ -30,48 +25,22 @@ const SignIn: NextPage = ({ providers }: Props) => {
Sign in with Sign in with
</span> </span>
<div className="mt-6 grid grid-cols-2 gap-3"> <div className="mt-6 grid grid-cols-2 gap-3">
<button {Object.values(providers).map((provider) => (
onClick={() => <button
signIn("google", { key={provider.id}
callbackUrl: providers.google.callbackUrl, className="hover:bg-gray-750 relative inline-flex items-center justify-center rounded-md border border-gray-700 bg-gray-800 px-6 py-3 text-lg font-medium text-white shadow-sm hover:text-gray-100"
}) type="button"
} onClick={() =>
className="hover:bg-gray-750 relative inline-flex items-center justify-center rounded-md border border-gray-700 bg-gray-800 px-6 py-3 text-lg font-medium text-white shadow-sm hover:text-gray-100" void signIn(provider.id, {
type="button" callbackUrl: provider.callbackUrl,
> })
<span className="flex flex-row"> }
<svg >
aria-hidden="true" <span className="flex flex-row">
focusable="false" <span>{provider.name}</span>
data-prefix="fab" </span>
data-icon="google" </button>
className="svg-inline--fa fa-google mr-2" ))}
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 488 512"
>
<path
fill="currentColor"
d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
></path>
</svg>
<span>Google</span>
</span>
</button>
<button
className="hover:bg-gray-750 relative inline-flex items-center justify-center rounded-md border border-gray-700 bg-gray-800 px-6 py-3 text-lg font-medium text-white shadow-sm hover:text-gray-100"
type="button"
onClick={() =>
signIn("github", {
callbackUrl: providers.github.callbackUrl,
})
}
>
<span className="flex flex-row">
<span>Github</span>
</span>
</button>
</div> </div>
<p className="prose prose-sm mx-auto mt-6 max-w-[18rem] text-xs text-gray-500"> <p className="prose prose-sm mx-auto mt-6 max-w-[18rem] text-xs text-gray-500">
By signing in, you agree to our{" "} By signing in, you agree to our{" "}
@ -87,7 +56,7 @@ const SignIn: NextPage = ({ providers }: Props) => {
export default SignIn; export default SignIn;
export const getServerSideProps: GetServerSideProps = async (context) => { export async function getServerSideProps(context: GetServerSidePropsContext) {
const session = await getServerSession(context.req, context.res, authOptions); const session = await getServerSession(context.req, context.res, authOptions);
// If the user is already logged in, redirect. // If the user is already logged in, redirect.
@ -98,7 +67,8 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
} }
const providers = await getProviders(); const providers = await getProviders();
return { return {
props: { providers }, props: { providers: providers ?? [] },
}; };
}; }