add custom sign in page
This commit is contained in:
MarconLP
parent
e270079c86
commit
9260300521
4 changed files with 162 additions and 55 deletions
104
src/pages/sign-in.tsx
Normal file
104
src/pages/sign-in.tsx
Normal file
|
|
@ -0,0 +1,104 @@
|
||||||
|
import { GetServerSideProps, type NextPage } from "next";
|
||||||
|
import Head from "next/head";
|
||||||
|
|
||||||
|
import { api } from "~/utils/api";
|
||||||
|
import { type AppProps } from "next/app";
|
||||||
|
import { getProviders, signIn } from "next-auth/react";
|
||||||
|
import { getServerSession } from "next-auth";
|
||||||
|
import { authOptions } from "~/server/auth";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
providers: AppProps;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SignIn: NextPage = ({ providers }: Props) => {
|
||||||
|
const hello = api.example.hello.useQuery({ text: "from tRPC" });
|
||||||
|
|
||||||
|
console.log(providers);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>Create T3 App</title>
|
||||||
|
<meta name="description" content="Generated by create-t3-app" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
</Head>
|
||||||
|
<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
|
||||||
|
<div className="border-y border-gray-700 bg-gray-800 px-4 py-8 shadow sm:rounded-lg sm:border-x sm:px-10">
|
||||||
|
<div className="animate-fade-in flex flex-col justify-center text-center">
|
||||||
|
<span className="text-sm font-medium text-gray-300">
|
||||||
|
Sign in with
|
||||||
|
</span>
|
||||||
|
<div className="mt-6 grid grid-cols-2 gap-3">
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
signIn("google", {
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<span className="flex flex-row">
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
focusable="false"
|
||||||
|
data-prefix="fab"
|
||||||
|
data-icon="google"
|
||||||
|
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>
|
||||||
|
<p className="prose prose-sm mx-auto mt-6 max-w-[18rem] text-xs text-gray-500">
|
||||||
|
By signing in, you agree to our{" "}
|
||||||
|
<a href="/info/terms-of-service">Terms of Service</a> and{" "}
|
||||||
|
<a href="/info/privacy-policy">Privacy Policy</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SignIn;
|
||||||
|
|
||||||
|
export const getServerSideProps: GetServerSideProps = async (context) => {
|
||||||
|
const session = await getServerSession(context.req, context.res, authOptions);
|
||||||
|
|
||||||
|
// If the user is already logged in, redirect.
|
||||||
|
// Note: Make sure not to redirect to the same page
|
||||||
|
// To avoid an infinite loop!
|
||||||
|
if (session) {
|
||||||
|
return { redirect: { destination: "/" } };
|
||||||
|
}
|
||||||
|
|
||||||
|
const providers = await getProviders();
|
||||||
|
return {
|
||||||
|
props: { providers },
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
@ -50,12 +50,12 @@ export const authOptions: NextAuthOptions = {
|
||||||
providers: [
|
providers: [
|
||||||
GoogleProvider({
|
GoogleProvider({
|
||||||
clientId: env.GOOGLE_CLIENT_ID,
|
clientId: env.GOOGLE_CLIENT_ID,
|
||||||
clientSecret: env.GOOGLE_CLIENT_SECRET
|
clientSecret: env.GOOGLE_CLIENT_SECRET,
|
||||||
}),
|
}),
|
||||||
GitHubProvider({
|
GitHubProvider({
|
||||||
clientId: env.GITHUB_ID,
|
clientId: env.GITHUB_ID,
|
||||||
clientSecret: env.GITHUB_SECRET
|
clientSecret: env.GITHUB_SECRET,
|
||||||
})
|
}),
|
||||||
/**
|
/**
|
||||||
* ...add more providers here.
|
* ...add more providers here.
|
||||||
*
|
*
|
||||||
|
|
@ -66,6 +66,9 @@ export const authOptions: NextAuthOptions = {
|
||||||
* @see https://next-auth.js.org/providers/github
|
* @see https://next-auth.js.org/providers/github
|
||||||
*/
|
*/
|
||||||
],
|
],
|
||||||
|
pages: {
|
||||||
|
signIn: "/sign-in",
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue