log in fixed

elixir-europe · Dec 27, 2023 · b7373a4 · b7373a4
1 parent b81a0a6
commit b7373a4
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 34 deletions.
diff --git a/frontend/src/components/NavBar/Navbar.js b/frontend/src/components/NavBar/Navbar.js
@@ -5,6 +5,8 @@ import { useContext } from 'react'
 import { useAuth } from 'oidc-react'
 import OutsideClickHandler from 'react-outside-click-handler'
 import './Navbar.css'
+import { useNavigate } from 'react-router-dom'
+import LoggedIn from '../SignIn/LoggedIn'
 
 function Navbar () {
   const [selected, setIsSelected] = useState('')
@@ -18,7 +20,9 @@ function Navbar () {
     getStoredToken,
     userNameToShare
   } = useContext(AuthContext)
+
   const auth = useAuth()
+  const navigate = useNavigate()
 
   useEffect(() => {
     console.log(auth)
@@ -27,10 +31,13 @@ function Navbar () {
     let isAuthenticated = false
     if (token === null) {
       isAuthenticated = auth.userData?.id_token ? true : false
+      console.log(isAuthenticated)
+      console.log(auth.userData)
     } else {
       isAuthenticated = true
+      console.log(isAuthenticated)
     }
-
+  
     if (isAuthenticated || isLoggedIn === true) {
       setIsLoggedIn(true)
     } else {
@@ -46,7 +53,7 @@ function Navbar () {
     setOpenMenu(!openMenu)
   }
 
-  const handleClik = () => {
+  const handleClick = () => {
     setIsLoggedIn(false)
     auth.signOut()
     logOutUser()
@@ -55,6 +62,7 @@ function Navbar () {
 
   return (
     <div className='navB'>
+      <LoggedIn/>
       <nav className='nav2'>
         <NavLink
           exact
@@ -166,7 +174,7 @@ function Navbar () {
               exact
               to='/'
               className={({ isActive }) => (isActive ? 'Sign-in3' : 'Sign-in3')}
-              onClick={handleClik}
+              onClick={handleClick}
             >
               <img
                 className='ls-login-image2'
@@ -180,7 +188,6 @@ function Navbar () {
         )}
 
         <div class='animation nav3'></div>
-
       </nav>
       <nav className='nav4'>
         <button className='buttonMenu' onClick={handleMenu}>
@@ -248,7 +255,7 @@ function Navbar () {
                       className={({ isActive }) =>
                         isActive ? 'Sign-in4' : 'Sign-in3'
                       }
-                      onClick={handleClik}
+                      onClick={handleClick}
                     >
                       <img
                         className='ls-login-image2'
@@ -368,7 +375,7 @@ function Navbar () {
                       className={({ isActive }) =>
                         isActive ? 'Sign-in4' : 'Sign-in3'
                       }
-                      onClick={handleClik}
+                      onClick={handleClick}
                     >
                       <img
                         className='ls-login-image2'
@@ -385,6 +392,7 @@ function Navbar () {
         )}
       </nav>
     </div>
+
   )
 }
 

diff --git a/frontend/src/components/SignIn/LoggedIn.js b/frontend/src/components/SignIn/LoggedIn.js
@@ -1,9 +1,24 @@
 import React from 'react';
 import { useAuth } from 'oidc-react';
+import { useContext } from 'react';
+import { AuthContext } from '../context/AuthContext'
+
 
 const LoggedIn = () => {
   const auth = useAuth();
+  const {
+    isLoggedIn,
+    setIsLoggedIn,
+    logOutUser,
+    setUserNameToShare
+  } = useContext(AuthContext)
+
   if (auth && auth.userData) {
+    console.log(auth)
+    console.log(auth.userData)
+    setIsLoggedIn(true)
+    setUserNameToShare(auth.userData.profile.name)
+
     return (
       <div>
         <strong>Logged in! 🎉</strong><br />

diff --git a/frontend/src/components/SignIn/SignInForm.js b/frontend/src/components/SignIn/SignInForm.js
@@ -6,14 +6,14 @@ import { useAuth } from 'oidc-react'
 export default function SignInForm () {
   const auth = useAuth()
   const isAuthenticated = auth.userData?.id_token ? true : false
+
   if (!isAuthenticated) {
     auth.userManager?.signinRedirect()
-  }
+  } 
 
   return (
     <div className='App'>
       <header className='App-header'>
-        <p>OIDC React</p>
         <LoggedIn />
       </header>
     </div>

diff --git a/frontend/src/components/context/AuthContext.js b/frontend/src/components/context/AuthContext.js
@@ -1,6 +1,7 @@
 import React, { useState, createContext, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import configData from '../../config.json'
+import { useAuth } from 'oidc-react';
 
 const AuthContext = createContext()
 
@@ -11,7 +12,7 @@ function AuthProviderWrapper (props) {
   const [expirationMessage, setExpirationMessage] = useState('')
   const [isLoggedIn, setIsLoggedIn] = useState(false)
   const navigate = useNavigate()
-
+  const auth = useAuth();
   // Functions to store and delete the token received by the backend in the browser
   const getStoredToken = () => {
     return localStorage.getItem('authToken')
@@ -47,6 +48,7 @@ function AuthProviderWrapper (props) {
 
   const logOutUser = () => {
     removeToken()
+    auth = null
     setIsLoggedIn(false)
     setExpirationMessage('')
     navigate('/')

diff --git a/frontend/src/index.js b/frontend/src/index.js
@@ -1,21 +1,21 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import './index.css'
 import configData from './config.json'
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import { BrowserRouter } from 'react-router-dom';
-import { AuthProviderWrapper } from './components/context/AuthContext';
-import { AuthProvider } from 'oidc-react';
+import App from './App'
+import reportWebVitals from './reportWebVitals'
+import { BrowserRouter } from 'react-router-dom'
+import { AuthProviderWrapper } from './components/context/AuthContext'
+import { AuthProvider } from 'oidc-react'
 
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'))
 
 const oidcConfig = {
-  onSignIn: async (user) => {
-    alert('You just signed in!');
-    console.log(user);
-    window.location.hash = '';
+  onSignIn: async user => {
+    alert('You just signed in!')
+    console.log(user)
+    window.location.hash = ''
   },
   authority: 'https://login.elixir-czech.org/oidc',
   clientId: process.env.REACT_APP_CLIENT_ID,
@@ -24,26 +24,24 @@ const oidcConfig = {
   responseType: 'code',
   automaticSilentRenew: true,
   redirectUri:
-    process.env.NODE_ENV === 'development'
-      && configData.REDIRECT_URL,
+    process.env.NODE_ENV === 'development' && configData.REDIRECT_URL,
   scope: 'openid profile email ga4gh_passport_v1 offline_access',
   revokeAccessTokenOnSignout: true
-};
+}
 
 root.render(
-
   <BrowserRouter>
-  <AuthProvider {...oidcConfig}>
-    <AuthProviderWrapper>
-      <App />
-    </AuthProviderWrapper>
+    <AuthProvider {...oidcConfig}>
+      <AuthProviderWrapper>
+        <App />
+      </AuthProviderWrapper>
     </AuthProvider>
-
   </BrowserRouter>
-
-);
+)
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()
+
+