Google login pass 1

package.json

@@ -4,11 +4,13 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.3.13",
-    "@aws-amplify/auth": "^3.4.29",
-    "@aws-amplify/interactions": "^3.3.29",
-    "@aws-amplify/storage": "^3.3.29",
-    "@aws-amplify/ui": "^2.0.2",
-    "@aws-amplify/ui-react": "^1.2.7",
+    "@aws-amplify/auth": "^4.2.0",
+    "@aws-amplify/core": "^3.8.24",
+    "@aws-amplify/interactions": "^4.0.8",
+    "@aws-amplify/storage": "^4.3.3",
+    "@aws-amplify/ui": "^2.0.3",
+    "@aws-amplify/ui-components": "^1.7.1",
+    "@aws-amplify/ui-react": "^1.2.8",
     "@emotion/styled": "^11.3.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
@@ -23,8 +25,8 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
     "@typescript-eslint/eslint-plugin": "^4.20.0",
-    "aws-amplify": "^3.4.3",
-    "aws-amplify-react": "^4.2.30",
+    "aws-amplify": "^4.2.2",
+    "aws-amplify-react": "^5.0.8",
     "bootstrap": "^4.6.0",
     "clsx": "^1.1.1",
     "eslint-plugin-react": "^7.23.1",

src/App/App.tsx

@@ -1,33 +1,39 @@
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { useState, useEffect } from 'react';
+import { ApolloError } from '@apollo/client';
 import { withAuthenticator } from 'aws-amplify-react';
-import Amplify, { Auth, Hub } from 'aws-amplify';
-import { ApolloError } from '@apollo/client/errors';
+import { Auth, Hub } from 'aws-amplify';
 
-import Sidebar from '../Components/Sidebar';
 import Content from '../Components/Content';
 import Navigation from '../Navigation/Navigation';
 
 import './App.scss';
 import { useGetCoursesQuery } from '../__generated__/types';
 import { environment } from '../environment';
+import Sidebar from '../Components/Sidebar';
 
-Amplify.configure({
-   Auth: {
-      identityPoolId: 'us-east-1:07057d76-612a-4045-8522-f38a759cf216',
-      region: 'us-east-1',
-      userPoolId: 'us-east-1_POfbbYTKF',
-      userPoolWebClientId: '24sdf1brebo58s89ja0b63c51d',
-      oauth: {
-         domain: 'flipted-ios-test.auth.us-east-1.amazoncognito.com',
-         scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],
-         redirectSignIn: environment.redirectSignIn,
-         redirectSignOut: environment.redirectSignout,
-         responseType: 'token',
-      },
+Auth.configure({
+   identityPoolId: 'us-east-1:07057d76-612a-4045-8522-f38a759cf216',
+   region: 'us-east-1',
+   userPoolId: 'us-east-1_POfbbYTKF',
+   userPoolWebClientId: '24sdf1brebo58s89ja0b63c51d',
+   oauth: {
+      domain: 'https://flipted-ios-test.auth.us-east-1.amazoncognito.com',
+      scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],
+      redirectSignIn: 'https://destin-flipted.herokuapp.com/',
+      redirectSignOut: 'https://destin-flipted.herokuapp.com/',
+      responseType: 'token',
    },
 });
 
+console.log(`Redirect Sign In ${environment.redirectSignIn}`);
+console.log(`Redirect Sign Out ${environment.redirectSignout}`);
+
+const federated = {
+   google_client_id: '993811506351-76rvcgqvlsg96vvr0fio76p0il5t4quq.apps.googleusercontent.com',
+};
+
 // Entry point of the Flitped App
 function App() {
    const [, setUser] = useState(null);
@@ -48,26 +54,32 @@ function App() {
          .then((userSession) => {
             const accessToken = userSession.getAccessToken();
             const jwt = accessToken.getJwtToken();
+
             localStorage.setItem('accessToken', JSON.stringify(accessToken));
             localStorage.setItem('jwt', jwt);
+            console.log('Obtained user session and saved JWT');
 
             return Auth.currentAuthenticatedUser();
          })
          .then((authUser) => {
+            console.log('Set auth user');
+
             setUser(authUser);
             setFirstName(authUser.attributes.given_name);
          })
-         .catch(() => console.log('Not signed in'));
+         .catch((e) => console.log(`Error!!: ${e}`));
    }
    useEffect(() => {
       Hub.listen('auth', ({ payload: { event, data } }) => {
          switch (event) {
             case 'signIn':
             case 'oauthSignIn':
             case 'cognitoHostedUI':
+               console.log('Signed in!');
                storeToken();
                break;
             case 'signOut':
+               console.log('Signed out!');
                setUser(null);
                break;
             case 'signIn_failure':
@@ -109,6 +121,6 @@ function App() {
    );
 }
 
-export default withAuthenticator(App, undefined, undefined, undefined, undefined, {
+export default withAuthenticator(App, undefined, undefined, federated, undefined, {
    hiddenDefaults: ['phone_number'],
 });

src/Components/Content/Content.tsx

@@ -13,7 +13,7 @@ type Props = {
 };
 
 export default function Content({ courses, refetchCourses }: Props) {
-   const { loading, error, data } = useUserQuery();
+   const { loading, error, data } = useUserQuery({ fetchPolicy: 'network-only' });
 
    if (loading || error || !data) {
       return <></>;

src/Components/MarketHome/StudentInfoPage.tsx

@@ -42,7 +42,7 @@ export function StudentInfoPage() {
             studentId,
             courseId: classId,
          },
-      }).catch((e) => console.log(e));
+      }).catch((e: any) => console.log(e));
    };
 
    const handleChange = () => {
@@ -52,7 +52,7 @@ export function StudentInfoPage() {
             courseId: classId,
             blocked: !checked,
          },
-      }).catch((e) => console.log(e));
+      }).catch((e: any) => console.log(e));
       setChecked(!checked);
    };
    const { loading, error, data } = useStudentQuery({

src/index.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { ApolloProvider } from '@apollo/client';
+import { ApolloProvider } from '@apollo/client/react';
+
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import apolloClient from './clients/apollo-client';