From 92603005211942275599dfc72914b48a8c441e87 Mon Sep 17 00:00:00 2001 From: MarconLP <13001502+MarconLP@users.noreply.github.com> Date: Mon, 10 Apr 2023 23:33:04 +0200 Subject: [PATCH] add custom sign in page --- src/pages/share/[videoId].tsx | 52 ++++++++--------- src/pages/sign-in.tsx | 104 ++++++++++++++++++++++++++++++++++ src/pages/videos.tsx | 52 ++++++++--------- src/server/auth.ts | 9 ++- 4 files changed, 162 insertions(+), 55 deletions(-) create mode 100644 src/pages/sign-in.tsx diff --git a/src/pages/share/[videoId].tsx b/src/pages/share/[videoId].tsx index 318998b..b53c9a5 100644 --- a/src/pages/share/[videoId].tsx +++ b/src/pages/share/[videoId].tsx @@ -1,27 +1,27 @@ -import { type NextPage } from "next"; -import Head from "next/head"; - -import { api } from "~/utils/api"; - -const VideoList: NextPage = () => { - const hello = api.example.hello.useQuery({ text: "from tRPC" }); - - return ( - <> - - Create T3 App - - - -
-
-

- single video page -

-
-
- - ); -}; - +import { type NextPage } from "next"; +import Head from "next/head"; + +import { api } from "~/utils/api"; + +const VideoList: NextPage = () => { + const hello = api.example.hello.useQuery({ text: "from tRPC" }); + + return ( + <> + + Create T3 App + + + +
+
+

+ single video page +

+
+
+ + ); +}; + export default VideoList; \ No newline at end of file diff --git a/src/pages/sign-in.tsx b/src/pages/sign-in.tsx new file mode 100644 index 0000000..95a91a5 --- /dev/null +++ b/src/pages/sign-in.tsx @@ -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 ( + <> + + Create T3 App + + + +
+
+
+ + Sign in with + +
+ + + +
+

+ By signing in, you agree to our{" "} + Terms of Service and{" "} + Privacy Policy. +

+
+
+
+ + ); +}; + +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 }, + }; +}; diff --git a/src/pages/videos.tsx b/src/pages/videos.tsx index 5b43001..e1e82d6 100644 --- a/src/pages/videos.tsx +++ b/src/pages/videos.tsx @@ -1,27 +1,27 @@ -import { type NextPage } from "next"; -import Head from "next/head"; - -import { api } from "~/utils/api"; - -const VideoList: NextPage = () => { - const hello = api.example.hello.useQuery({ text: "from tRPC" }); - - return ( - <> - - Create T3 App - - - -
-
-

- video collection list -

-
-
- - ); -}; - +import { type NextPage } from "next"; +import Head from "next/head"; + +import { api } from "~/utils/api"; + +const VideoList: NextPage = () => { + const hello = api.example.hello.useQuery({ text: "from tRPC" }); + + return ( + <> + + Create T3 App + + + +
+
+

+ video collection list +

+
+
+ + ); +}; + export default VideoList; \ No newline at end of file diff --git a/src/server/auth.ts b/src/server/auth.ts index 6f199ae..9fd14eb 100644 --- a/src/server/auth.ts +++ b/src/server/auth.ts @@ -50,12 +50,12 @@ export const authOptions: NextAuthOptions = { providers: [ GoogleProvider({ clientId: env.GOOGLE_CLIENT_ID, - clientSecret: env.GOOGLE_CLIENT_SECRET + clientSecret: env.GOOGLE_CLIENT_SECRET, }), GitHubProvider({ clientId: env.GITHUB_ID, - clientSecret: env.GITHUB_SECRET - }) + clientSecret: env.GITHUB_SECRET, + }), /** * ...add more providers here. * @@ -66,6 +66,9 @@ export const authOptions: NextAuthOptions = { * @see https://next-auth.js.org/providers/github */ ], + pages: { + signIn: "/sign-in", + }, }; /**