Social login configuration

src/App.jsx

@@ -11,6 +11,7 @@ import SignupScreen from './screens/signUp/SignupScreen'
 import CongratulationScreen from './screens/congratulation/CongratulationScreen'
 import Messenger from './screens/messenger/Messenger'
 import Library from './screens/library/Library'
+import LoginRedirect from './components/loginRedirect/LoginRedirect'
 import './App.css'
 import DashboardComponent from './screens/dashboard/MainDashboard'
 import Achievements from './screens/dashboard/Achievements'
@@ -58,11 +59,12 @@ function App () {
       <Router>
         <ScrollToTop>
           <Switch>
+            <Route component={LoginRedirect} path='/redirect' exact />
             <Route component={LoginScreen} path='/login' exact />
             <Route component={SignupScreen} path='/register' exact />
             <Route component={ForgotPassword} path='/forgot-password' />
+            <Route component={() => <Redirect to='/login' />} path='/' exact />
             <PrivateRoute component={UserVerification} path='/verification' exact />
-            <PrivateRoute component={() => <Redirect to='/login' />} path='/' exact />
             <PrivateRoute component={LogoutUser} path='/logout' exact />
             <PrivateRoute component={CongratulationScreen} path='/edit-information' exact />
             <PrivateRoute component={CalendarScreen} exact path='/calendar/my-events' />

src/actions/userAction.js

@@ -91,8 +91,8 @@ if (process.env.REACT_APP_AUTH_METHOD === 'cognito') {
       oauth: {
         domain: process.env.REACT_APP_COGNITO_DOMAIN_NAME, // domain_name
         scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],
-        redirectSignIn: process.env.FRONTEND_URL,
-        redirectSignOut: process.env.FRONTEND_URL,
+        redirectSignIn: process.env.REACT_APP_FRONTEND_URL,
+        redirectSignOut: process.env.REACT_APP_FRONTEND_URL,
         responseType: 'token' // or 'token', note that REFRESH token will only be generated when the responseType is code
       }
     }
@@ -137,6 +137,64 @@ export const register = (name, password) => async (dispatch) => {
   }
 }
 
+export const socialSignIn = (provider) => (dispatch) => {
+  try {
+    Auth.federatedSignIn({ provider })
+  } catch (error) {
+    dispatch({
+      type: USER_LOGIN_FAIL,
+      payload: error.response && error.response.data.error ? error.response.data.error : error.message
+    })
+  }
+}
+
+export const socialSignInRedirect = (provider) => async (dispatch) => {
+  let data = {}
+  try {
+    dispatch({ type: USER_LOGIN_REQUEST })
+    const response = await Auth.currentAuthenticatedUser()
+    if (response) {
+      data = {
+        token: response?.signInUserSession?.idToken?.jwtToken || '',
+        id: response?.attributes?.sub || ''
+      }
+      window.localStorage.setItem('userInfo', JSON.stringify(data))
+      await postApi(dispatch, `${process.env.REACT_APP_API_BASE_URL}/api/users`, { id: data.id }, {
+        headers: {
+          Authorization: 'Bearer ' + data.token
+        }
+      })
+
+      await axios.put(`${process.env.REACT_APP_API_BASE_URL}/api/users/profile`, {
+        firstName: response.attributes.given_name,
+        lastName: response.attributes.family_name,
+        birthday: response.attributes.birthdate,
+        phone: response.attributes.phone_number,
+        email: response.attributes.email
+      },
+      {
+        headers: {
+          Authorization: 'Bearer ' + data.token
+        }
+      })
+
+      window.localStorage.setItem('userInfo', JSON.stringify(data))
+      dispatch({ type: USER_LOGIN_SUCCESS, payload: data })
+      await routingCommunityNews(dispatch, true)
+    } else {
+      window.location.href = '/login'
+      console.log('Not logged in')
+    }
+  } catch (error) {
+    dispatch({
+      type: USER_LOGIN_FAIL,
+      payload: error.response && error.response.data.error
+        ? error.response.data.error
+        : error.message
+    })
+  }
+}
+
 export const login = (name, password) => async (dispatch) => {
   let data = {}
   try {
@@ -213,7 +271,7 @@ export const checkAndUpdateToken = () => async (dispatch) => {
     }
   }).catch((data) => {
     return tokenFailure(dispatch, 'Unauthorized')
-    /*const message = data.response && data.response.data.name ? data.response.data.name : data.message
+    /* const message = data.response && data.response.data.name ? data.response.data.name : data.message
     if (message === 'TokenExpired') {
       if (process.env.REACT_APP_AUTH_METHOD === 'cognito') {
         Auth.currentSession().then((res) => {
@@ -242,7 +300,7 @@ export const checkAndUpdateToken = () => async (dispatch) => {
       }
     } else {
       return tokenFailure(dispatch, 'Unauthorized')
-    }*/
+    } */
   })
 }
 
@@ -256,6 +314,8 @@ const tokenFailure = (dispatch, message) => {
 
 export const getMyDetails = () => async (dispatch) => {
   try {
+    const response = await Auth.currentAuthenticatedUser()
+    console.log(response)
     dispatch({ type: USER_DETAILS_REQUEST })
     const { data } = await getApi(dispatch, `${process.env.REACT_APP_API_BASE_URL}/api/users/profile`)
     const userdata = {
@@ -357,11 +417,9 @@ export const searchUsers = (search) => async (dispatch) => {
 }
 
 export const logout = () => (dispatch) => {
-  Auth.signOut().then(() => {
-    window.localStorage.clear()
-    dispatch({ type: USER_LOGOUT })
-    document.location.href = '/login'
-  }).catch(err => console.log(err))
+  window.localStorage.clear()
+  dispatch({ type: USER_LOGOUT })
+  document.location.href = '/login'
 }
 
 export const confirmPin = (username, code) => async (dispatch) => {

src/components/loginRedirect/LoginRedirect.jsx

@@ -0,0 +1,19 @@
+import React, { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+import { socialSignInRedirect } from '../../actions/userAction'
+
+const LoginRedirect = () => {
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    dispatch(socialSignInRedirect())
+  }, [])
+
+  return (
+    <div>
+      Redirecting...
+    </div>
+  )
+}
+
+export default LoginRedirect

src/components/signInSignUp/SignIn.jsx

@@ -3,9 +3,10 @@ import { Link, useHistory } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
 import { useForm } from 'react-hook-form'
 
-import { login } from '../../actions/userAction'
+import { login, socialSignIn } from '../../actions/userAction'
 import { USER_LOGIN_SUCCESS } from '../../constants/userConstants'
 import { SignInSignUpData } from './SignInSignUpData'
+import { Auth } from 'aws-amplify'
 
 import Button from '../button/Button'
 import Checkbox from '../checkbox/Checkbox'
@@ -37,6 +38,12 @@ const SignIn = () => {
     setShowPassword(!showPassword)
   }
 
+  useEffect(async () => {
+    const response = await Auth.currentAuthenticatedUser()
+    console.log(response)
+    if (response) history.push('/redirect')
+  }, [])
+
   useEffect(() => {
     /* Hub.listen("auth", ({ payload: { event, data } }) => {
       console.log(event);
@@ -98,20 +105,20 @@ const SignIn = () => {
 
   const loginWithFacebook = (e) => {
     e.preventDefault()
-    // Auth.federatedSignIn({ provider: "Facebook" });
+    dispatch(socialSignIn('Facebook'))
   }
 
   const loginWithGoogle = (e) => {
     e.preventDefault()
-    // Auth.federatedSignIn({ provider: "Google" });
+    dispatch(socialSignIn('Google'))
   }
 
   const onSubmit = ({ username, password }) => {
     dispatch(login(username, password))
   }
 
   return (
-    <form className='sign' onSubmit={handleSubmit(onSubmit)}>
+    <form className='sign'>
       <h1 className='welcome'>Sign In</h1>
       <div className='container'>
         {error && <div className='error'>{error}</div>}
@@ -157,7 +164,7 @@ const SignIn = () => {
         </div>
 
         <div className='btnWrapper'>
-          <Button name='Sign In' />
+          <Button name='Sign In' onClick={handleSubmit(onSubmit)} />
           <Link to='/forgot-password' className='fPassword green16px'>
             Forgot Password?
           </Link>