3 files changed, 15 insertions, 40 deletions
diff --git a/opendc-web/opendc-web-ui/src/containers/auth/Login.js b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
index 54605775..d8083d89 100644
--- a/opendc-web/opendc-web-ui/src/containers/auth/Login.js
+++ b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
@@ -1,44 +1,20 @@
 import React from 'react'
-import GoogleLogin from 'react-google-login'
-import { useDispatch } from 'react-redux'
-import { logIn } from '../../actions/auth'
-import config from '../../config'
+import { Button } from 'reactstrap'
+import { useAuth } from '../../auth'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSignInAlt } from '@fortawesome/free-solid-svg-icons'
 
-const Login = (props) => {
-    const { visible } = props
-    const dispatch = useDispatch()
-
-    const onLogin = (payload) => dispatch(logIn(payload))
-    const onAuthResponse = (response) => {
-        onLogin({
-            email: response.getBasicProfile().getEmail(),
-            givenName: response.getBasicProfile().getGivenName(),
-            familyName: response.getBasicProfile().getFamilyName(),
-            googleId: response.googleId,
-            authToken: response.getAuthResponse().id_token,
-            expiresAt: response.getAuthResponse().expires_at,
-        })
-    }
-    const onAuthFailure = (error) => {
-        // TODO Show error alert
-        console.error(error)
-    }
+function Login({ visible, className }) {
+    const { loginWithRedirect } = useAuth()
 
     if (!visible) {
         return <span />
     }
 
     return (
-        <GoogleLogin
-            clientId={config.OAUTH_CLIENT_ID}
-            onSuccess={onAuthResponse}
-            onFailure={onAuthFailure}
-            render={(renderProps) => (
-                <span onClick={renderProps.onClick} className="login btn btn-primary">
-                    <span className="fa fa-google" /> Login with Google
-                </span>
-            )}
-        />
+        <Button color="primary" onClick={() => loginWithRedirect()} className={className}>
+            <FontAwesomeIcon icon={faSignInAlt} /> Sign In
+        </Button>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/containers/auth/Logout.js b/opendc-web/opendc-web-ui/src/containers/auth/Logout.js
index 66f0f6db..37705c5d 100644
--- a/opendc-web/opendc-web-ui/src/containers/auth/Logout.js
+++ b/opendc-web/opendc-web-ui/src/containers/auth/Logout.js
@@ -1,11 +1,10 @@
 import React from 'react'
-import { useDispatch } from 'react-redux'
-import { logOut } from '../../actions/auth'
 import LogoutButton from '../../components/navigation/LogoutButton'
+import { useAuth } from '../../auth'
 
 const Logout = (props) => {
-    const dispatch = useDispatch()
-    return <LogoutButton {...props} onLogout={() => dispatch(logOut())} />
+    const { logout } = useAuth()
+    return <LogoutButton {...props} onLogout={() => logout({ returnTo: window.location.origin })} />
 }
 
 export default Logout
diff --git a/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js b/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js
index 291c0068..70f5b884 100644
--- a/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js
+++ b/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { useSelector } from 'react-redux'
+import { useAuth } from '../../auth'
 
 function ProfileName() {
-    const name = useSelector((state) => `${state.auth.givenName} ${state.auth.familyName}`)
-    return <span>{name}</span>
+    const { isLoading, user } = useAuth()
+    return isLoading ? <span>Loading...</span> : <span>{user.name}</span>
 }
 
 export default ProfileName