Add Google Auth provider (#19)

# Description

This PR configures Google signup

- add new provider
- add button
- update examples

.env.example

@@ -2,5 +2,8 @@ NEXTAUTH_SECRET=mypassword
 NEXTAUTH_URL="http://localhost:3000" # dev only
 NEXTAUTH_URL_INTERNAL="http://localhost:3000" # dev only
 
+GOOGLE_CLIENT_ID=*****
+GOOGLE_CLIENT_SECRET=*****
+
 GITHUB_CLIENT_ID=*****
 GITHUB_CLIENT_SECRET=*****

next.config.js

@@ -4,7 +4,11 @@ const nextConfig = {
     appDir: true,
   },
   images: {
-    domains: ["images.unsplash.com", "avatars.githubusercontent.com"],
+    domains: [
+      "images.unsplash.com",
+      "avatars.githubusercontent.com",
+      "lh3.googleusercontent.com",
+    ],
   },
 };
 

src/components/SignInButton.tsx

@@ -1,9 +1,7 @@
 "use client";
-
-import { signIn } from "next-auth/react";
 import { ReactNode } from "react";
-
-type LoginProviders = "github"; // | "google"
+import { signIn } from "next-auth/react";
+import { LoginProviders } from "@/shared/auth";
 
 type Props = {
   children: ReactNode;

src/components/SignInForm.tsx

@@ -24,7 +24,8 @@ export default function SignInForm(props: Props) {
         </div>
 
         <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-          <div className="mt-5">
+          <div className="mt-5 flex gap-4 flex-col">
+            <SignInButton provider="google">Continue with Google</SignInButton>
             <SignInButton provider="github">Continue with Github</SignInButton>
           </div>
           {props.error && (

src/shared/auth.ts

@@ -1,14 +1,18 @@
 import { headers } from "next/headers";
 import { NextAuthOptions } from "next-auth";
 import GithubProvider from "next-auth/providers/github";
+import GoogleProvider from "next-auth/providers/google";
 import {
   NO_SESSION_REDIRECT,
   ORIGIN_URL_KEY,
   githubCredentials,
+  googleCredentials,
 } from "./settings";
 
+export type LoginProviders = "github" | "google";
+
 export const authOptions: NextAuthOptions = {
-  providers: [GithubProvider(githubCredentials)],
+  providers: [GithubProvider(githubCredentials), GoogleProvider(googleCredentials),],
   pages: {
     signIn: "/login",
   },

src/shared/settings.ts

@@ -5,6 +5,18 @@ export const githubCredentials = {
   clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
 };
 
+export const googleCredentials = {
+  clientId: process.env.GOOGLE_CLIENT_ID as string,
+  clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
+  authorization: {
+    params: {
+      prompt: "consent",
+      access_type: "offline",
+      response_type: "code",
+    },
+  },
+};
+
 export const ORIGIN_URL_KEY = "x-url";
 export const NO_SESSION_REDIRECT = "/login?callbackUrl=";