Add google things on the front

back/src/auth/auth.controller.ts

@@ -51,9 +51,9 @@ export class AuthController {
 	@Get("logged/google")
 	@UseGuards(AuthGuard('google'))
 	async googleLoginCallbakc(@Req() req: any) {
-		let user = await this.usersService.user({googleID: req.id});
+		let user = await this.usersService.user({googleID: req.user.googleID});
 		if (!user) {
-			user = await this.usersService.createUser(req)
+			user = await this.usersService.createUser(req.user)
 			await this.settingsService.createUserSetting(user.id);
 		}
 		return this.authService.login(user);

back/src/auth/google.strategy.ts

@@ -1,6 +1,7 @@
 import { PassportStrategy } from '@nestjs/passport';
 import { Strategy, VerifyCallback } from 'passport-google-oauth20';
 import { Injectable } from '@nestjs/common';
+import { User } from '@prisma/client';
 
 @Injectable()
 export class GoogleStrategy extends PassportStrategy(Strategy) {
@@ -8,7 +9,7 @@ export class GoogleStrategy extends PassportStrategy(Strategy) {
 		super({
 			clientID: process.env.GOOGLE_CLIENT_ID,
 			clientSecret: process.env.GOOGLE_SECRET,
-			callbackURL: 'http://localhost:3000/google/redirect',
+			callbackURL: process.env.GOOGLE_CALLBACK_URL,
 			scope: ['email', 'profile'],
 		});
 	}
@@ -19,16 +20,16 @@ export class GoogleStrategy extends PassportStrategy(Strategy) {
 		profile: any,
 		done: VerifyCallback,
 	): Promise<any> {
-		console.log(profile);
-		const { name, emails, photos, username } = profile;
 		const user = {
-			email: emails[0].value,
-			username,
+			email: profile.emails[0].value,
+			username: profile.displayName,
 			password: null,
+			googleID: profile.id,
 			// firstName: name.givenName,
 			// lastName: name.familyName,
 			// picture: photos[0].value,
 		};
 		done(null, user);
+		return user;
 	}
 }

front/API.ts

@@ -47,7 +47,7 @@ export class APIError extends Error {
 }
 
 // we will need the same thing for the scorometer API url
-const baseAPIUrl =
+export const baseAPIUrl =
 	process.env.NODE_ENV != 'development' && Platform.OS === 'web'
 		? '/api'
 		: Constants.manifest?.extra?.apiUrl;

front/Navigation.tsx

@@ -28,6 +28,7 @@ import { Button, Center, VStack } from 'native-base';
 import { unsetAccessToken } from './state/UserSlice';
 import TextButton from './components/TextButton';
 import ErrorView from './views/ErrorView';
+import GoogleView from './views/GoogleView';
 
 // Util function to hide route props in URL
 const removeMe = () => '';
@@ -100,6 +101,11 @@ const publicRoutes = () =>
 			options: { title: 'Oops', headerShown: false },
 			link: undefined,
 		},
+		Google: {
+			component: GoogleView,
+			options: { title: 'Google signin', headerShown: false },
+			link: '/logged/google',
+		},
 	} as const);
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

front/nginx.conf.template

@@ -22,4 +22,4 @@ server {
 		proxy_set_header Connection $http_connection;
 		proxy_http_version 1.1;
 	}
-}
+}

front/views/AuthenticationView.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch } from '../state/Store';
 import { Translate, translate } from '../i18n/i18n';
-import API, { APIError } from '../API';
+import API, { APIError, baseAPIUrl } from '../API';
 import { setAccessToken } from '../state/UserSlice';
 import { Center, Button, Text } from 'native-base';
 import SigninForm from '../components/forms/signinform';
@@ -56,6 +56,13 @@ const AuthenticationView = ({ isSignup }: RouteProps<AuthenticationViewProps>) =
 			<Text>
 				<Translate translationKey="welcome" />
 			</Text>
+			<TextButton
+				translate={{ translationKey: "continuewithgoogle" }}
+				variant="outline"
+				marginTop={5}
+				colorScheme="primary"
+				onPress={() => window.location.href = `${baseAPIUrl}/auth/login/google`}
+			/>
 			{mode === 'signin' ? (
 				<SigninForm
 					onSubmit={(username, password) =>
@@ -78,13 +85,6 @@ const AuthenticationView = ({ isSignup }: RouteProps<AuthenticationViewProps>) =
 					{translate('forgottenPassword')}
 				</Button>
 			)}
-			<TextButton
-				translate={{ translationKey: "continuewithgoogle" }}
-				variant="outline"
-				marginTop={5}
-				colorScheme="primary"
-				onPress={() => window.location.href = "/api/login/google"}
-			/>
 			<TextButton
 				translate={{ translationKey: mode === 'signin' ? 'signUpBtn' : 'signInBtn' }}
 				variant="outline"

front/views/GoogleView.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from "react"
+import { useDispatch } from "react-redux";
+import API, { AccessToken } from "../API";
+import { setAccessToken } from "../state/UserSlice";
+
+const GoogleView = () => {
+	const dispatch = useDispatch();
+
+	useEffect(() => {
+		async function run() {
+			const accessToken = await API.fetch({
+				route: `/auth/logged/google${window.location.search}`,
+				method: 'GET',
+			}).then((responseBody) => responseBody.access_token as AccessToken)
+			dispatch(setAccessToken(accessToken))
+		}
+		run();
+	}, []);
+
+	return <p>Loading please wait</p>;
+}
+
+export default GoogleView;