add google login button

src/components/Authentication/Authenticator.tsx

@@ -29,7 +29,7 @@ function useToken(
 	useEffect(() => {
 		if (code) {
 			setPending(true);
-			createSession(code, inferRedirectUrl())
+			createSession(code, provider, inferRedirectUrl())
 				.then(({ token }) => {
 					setToken(token ?? null);
 				})
@@ -75,7 +75,7 @@ export default function Authenticator() {
 				children = (
 					<>
 						<h1>Sign In Error</h1>
-						We couldn't use your Ion account to log in.
+						We couldn't authenticate your account.
 					</>
 				);
 				break;

src/components/Authentication/authorizationEndpoint.ts

@@ -1,4 +1,4 @@
-function createAuthorizationEndpoint(redirectUrl: string) {
+function createIonAuthorizationEndpoint(redirectUrl: string) {
 	const url = new URL('https://ion.tjhsst.edu/oauth/authorize');
 
 	url.searchParams.set('response_type', 'code');
@@ -9,9 +9,38 @@ function createAuthorizationEndpoint(redirectUrl: string) {
 	return url.toString();
 }
 
+export function createGoogleAuthorizationEndpoint(redirectUrl: string): string {
+	const url = new URL('https://accounts.google.com/o/oauth2/v2/auth');
+
+	url.searchParams.set('access_type', 'offline');
+	url.searchParams.set('prompt', 'consent');
+	url.searchParams.set(
+		'scope',
+		[
+			'https://www.googleapis.com/auth/userinfo.profile',
+			'https://www.googleapis.com/auth/userinfo.email',
+		].join(' ')
+	);
+	url.searchParams.set('response_type', 'code');
+	url.searchParams.set(
+		'client_id',
+		'413572867232-2l4usbr5ensmj235qt25ccg5dmlsem6q.apps.googleusercontent.com'
+	);
+	url.searchParams.set('redirect_uri', redirectUrl);
+
+	return url.toString();
+}
+
+function getRedirectUrl(provider: 'ion' | 'google') {
+	return `${window.location.protocol}//${window.location.host}/auth/${provider}/callback`;
+}
+
+export const googleAuthorizationEndpoint = createGoogleAuthorizationEndpoint(
+	getRedirectUrl('google')
+);
+
 // window.location.protocol is http: or https:
 // window.location.host is localhost:3000 or wheelshare-frontend.vercel.app
-const redirectUrl = `${window.location.protocol}//${window.location.host}/auth/ion/callback`;
+export const ionAuthorizationEndpoint = createIonAuthorizationEndpoint(
-const authorizationEndpoint = createAuthorizationEndpoint(redirectUrl);
+	getRedirectUrl('ion')
-
+);
-export default authorizationEndpoint;

src/components/Authentication/createSession.ts

@@ -1,9 +1,16 @@
 import { domain } from '../api';
 
-export async function createSession(code: string, redirectUrl: string) {
+export async function createSession(
-	const res = await fetch(domain + 'create_session', {
+	code: string,
+	provider: string,
+	redirectUrl: string
+) {
+	const res = await fetch(`${domain}auth/${provider}`, {
 		method: 'post',
-		body: JSON.stringify({ code, redirectUrl }),
+		body: JSON.stringify({
+			code,
+			redirectUrl,
+		}),
 		headers: {
 			'Content-Type': 'application/json',
 		},

src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import authorizationEndpoint from '../Authentication/authorizationEndpoint';
+import { ionAuthorizationEndpoint } from '../Authentication/authorizationEndpoint';
 import logout from '../Authentication/logout';
 import { useMe, useNotifications } from '../hooks';
 import Notifications from '../Notifications/Notifications';
@@ -40,7 +40,7 @@ export default function Header() {
 					)}
 				</>
 			) : (
-				<UILink href={authorizationEndpoint}>Log in</UILink>
+				<UILink href={ionAuthorizationEndpoint}>Log in</UILink>
 			)}
 		</div>
 	);

src/components/WheelShareLoggedOut.tsx

@@ -1,4 +1,7 @@
-import authorizationEndpoint from './Authentication/authorizationEndpoint';
+import {
+	googleAuthorizationEndpoint,
+	ionAuthorizationEndpoint,
+} from './Authentication/authorizationEndpoint';
 import UILink from './UI/UILink';
 import UIPrimaryTitle from './UI/UIPrimaryTitle';
 
@@ -7,7 +10,8 @@ export default function WheelShareLoggedOut() {
 		<>
 			<UIPrimaryTitle>WheelShare</UIPrimaryTitle>
 			<p>To get started, log in with your Ion account.</p>
-			<UILink href={authorizationEndpoint}>Log in</UILink>
+			<UILink href={ionAuthorizationEndpoint}>Log in</UILink>
+			<UILink href={googleAuthorizationEndpoint}>Log in with Google</UILink>
 		</>
 	);
 }