3 files changed, 11 insertions, 41 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 b0da0d0e..8459ef5f 100644
--- a/opendc-web/opendc-web-ui/src/containers/auth/Login.js
+++ b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
@@ -1,43 +1,18 @@
 import React from 'react'
-import GoogleLogin from 'react-google-login'
-import { useDispatch } from 'react-redux'
-import { logIn } from '../../redux/actions/auth'
 import { Button } from 'reactstrap'
+import { useAuth } from '../../auth'
 
 function Login({ visible, className }) {
-    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)
-    }
+    const { loginWithRedirect } = useAuth()
 
     if (!visible) {
         return <span />
     }
 
     return (
-        <GoogleLogin
-            clientId={process.env.NEXT_PUBLIC_OAUTH_CLIENT_ID}
-            onSuccess={onAuthResponse}
-            onFailure={onAuthFailure}
-            render={(renderProps) => (
-                <Button color="primary" onClick={renderProps.onClick} className={className}>
-                    <span aria-hidden className="fa fa-google" /> Login with Google
-                </Button>
-            )}
-        />
+        <Button color="primary" onClick={() => loginWithRedirect()} className={className}>
+            <span aria-hidden className="fa fa-sign-in" /> 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 94d4d061..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 '../../redux/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 3992c00f..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,13 +1,9 @@
 import React from 'react'
-import { useUser } from '../../auth'
+import { useAuth } from '../../auth'
 
 function ProfileName() {
-    const user = useUser()
-    return (
-        <span>
-            {user.givenName} {user.familyName}
-        </span>
-    )
+    const { isLoading, user } = useAuth()
+    return isLoading ? <span>Loading...</span> : <span>{user.name}</span>
 }
 
 export default ProfileName