feat: implement siginin with google

Dockerfile

@@ -18,6 +18,7 @@ ARG NEXT_PUBLIC_API_BASE_PATH=/api
 ARG NEXT_PUBLIC_COGNITO_POOL_ENDPOINT
 ARG NEXT_PUBLIC_COGNITO_USER_POOL_ID
 ARG NEXT_PUBLIC_COGNITO_USER_POOL_CLIENT_ID
+ARG NEXT_PUBLIC_OAUTH_DOMAIN
 ARG DATABASE_URL
 
 ENV NEXT_PUBLIC_API_BASE_PATH=$NEXT_PUBLIC_API_BASE_PATH

client/.env.example

@@ -3,3 +3,4 @@ NEXT_PUBLIC_SERVER_PORT=31577
 NEXT_PUBLIC_COGNITO_POOL_ENDPOINT=http://localhost:5050
 NEXT_PUBLIC_COGNITO_USER_POOL_ID=ap-northeast-1_frourio
 NEXT_PUBLIC_COGNITO_USER_POOL_CLIENT_ID=catapult
+NEXT_PUBLIC_OAUTH_DOMAIN=XXXXXXXXXXXX.auth.ap-northeast-1.amazoncognito.com

client/pages/_app.page.tsx

@@ -9,10 +9,12 @@ import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useEffect } from 'react';
 import 'styles/globals.css';
+import { pagesPath } from 'utils/$path';
 import {
   NEXT_PUBLIC_COGNITO_POOL_ENDPOINT,
   NEXT_PUBLIC_COGNITO_USER_POOL_CLIENT_ID,
   NEXT_PUBLIC_COGNITO_USER_POOL_ID,
+  NEXT_PUBLIC_OAUTH_DOMAIN,
 } from 'utils/envValues';
 import '../styles/globals.css';
 
@@ -26,6 +28,19 @@ function MyApp({ Component, pageProps }: AppProps) {
           userPoolEndpoint: NEXT_PUBLIC_COGNITO_POOL_ENDPOINT,
           userPoolId: NEXT_PUBLIC_COGNITO_USER_POOL_ID,
           userPoolClientId: NEXT_PUBLIC_COGNITO_USER_POOL_CLIENT_ID,
+          loginWith:
+            NEXT_PUBLIC_OAUTH_DOMAIN === undefined
+              ? undefined
+              : {
+                  email: true,
+                  oauth: {
+                    domain: NEXT_PUBLIC_OAUTH_DOMAIN,
+                    scopes: ['openid'],
+                    redirectSignIn: [`${location.origin}${pagesPath.login.$url().pathname}`],
+                    redirectSignOut: [`${location.origin}${pagesPath.login.$url().pathname}`],
+                    responseType: 'code',
+                  },
+                },
         },
       },
     });

client/pages/login/index.page.tsx

@@ -7,6 +7,7 @@ import { useUser } from 'hooks/useUser';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import { pagesPath, staticPath } from 'utils/$path';
+import { NEXT_PUBLIC_OAUTH_DOMAIN } from 'utils/envValues';
 import styles from './index.module.css';
 
 const Login = () => {
@@ -28,6 +29,7 @@ const Login = () => {
           <Spacer axis="y" size={36} />
           <Authenticator
             signUpAttributes={['email']}
+            socialProviders={NEXT_PUBLIC_OAUTH_DOMAIN === undefined ? undefined : ['google']}
             services={{
               handleSignUp: (input) =>
                 signUp({

client/utils/envValues.ts

@@ -10,10 +10,12 @@ const NEXT_PUBLIC_COGNITO_USER_POOL_CLIENT_ID = z
 const NEXT_PUBLIC_COGNITO_POOL_ENDPOINT = z
   .string()
   .parse(process.env.NEXT_PUBLIC_COGNITO_POOL_ENDPOINT);
+const NEXT_PUBLIC_OAUTH_DOMAIN = z.string().optional().parse(process.env.NEXT_PUBLIC_OAUTH_DOMAIN);
 
 export {
   NEXT_PUBLIC_API_BASE_PATH,
   NEXT_PUBLIC_COGNITO_POOL_ENDPOINT,
   NEXT_PUBLIC_COGNITO_USER_POOL_CLIENT_ID,
   NEXT_PUBLIC_COGNITO_USER_POOL_ID,
+  NEXT_PUBLIC_OAUTH_DOMAIN,
 };