Merge pull request #14 from omthakare16/main

added useUser hook + updated readme

Author: ghoshbishakh

README.md

@@ -42,6 +42,8 @@ in `.env.local` file to make the environment variable accessible on `process.env
 Example App:
 
 ```jsx
+//index.js
+
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
@@ -50,19 +52,24 @@ import { EasyauthProvider } from "@easyauth.io/easyauth-react";
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <EasyauthProvider
-      authority={process.env.REACT_APP_EASYAUTH_APP_URL}
-      clientId={process.env.REACT_APP_EASYAUTH_CLIENT_ID}
-      redirectUri={process.env.REACT_APP_EASYAUTH_REDIRECT_URL}
-    >
+    <EasyauthProvider>
       <App />
     </EasyauthProvider>
   </React.StrictMode>
 );
 
+//User can also pass authority,clientId,redirectUri explicitly as a prop in EasauthProvider component 
+//for ex. <EasyauthProvider
+    //      authority={process.env.REACT_APP_EASYAUTH_APP_URL}
+    //      clientId={process.env.REACT_APP_EASYAUTH_CLIENT_ID}
+    //      redirectUri={process.env.REACT_APP_EASYAUTH_REDIRECT_URL}
+    //     >
+    //      <App />
+    //    </EasyauthProvider> 
+
 //App.js
 
-import { useEasyauth } from "@easyauth.io/easyauth-react";
+import { useEasyauth, UserProfile } from "@easyauth.io/easyauth-react";
 
 function App() {
   const auth = useEasyauth();
@@ -86,7 +93,7 @@ function App() {
       <div className="App">
         <header className="App-header">
           <p>Hello {auth.user?.profile.sub} </p>
-          <Profile />
+          <UserProfile />
           <button
             onClick={() => {
               auth.removeUser();

src/hooks/useUser/useUser.jsx

@@ -0,0 +1,29 @@
+import {useEffect, useState} from 'react';
+import {useEasyauth} from '../useEasyauth/useEasyauth.jsx';
+import {getProfile} from '../../api/api.js';
+
+export const useUser = () => {
+  const auth = useEasyauth();
+  const [user, setUser] = useState({});
+  const token = auth.user?.access_token;
+  useEffect(() => {
+    const fetchUser = async () => {
+      const response = await getProfile(token);
+      setUser(response.data);
+    };
+
+    if (token) {
+      fetchUser();
+    }
+  }, [token]);
+
+  return {
+    isAuthenticated: auth.isAuthenticated,
+    isLoading: Object.keys(user).length ?
+        false :
+        auth.isAuthenticated ?
+        true :
+        false,
+    user: user,
+  };
+};

src/index.js

@@ -3,3 +3,4 @@ export * from './hooks/useEasyauth/useEasyauth.jsx';
 export * from './components/UserProfile/UserProfile.jsx';
 export * from './components/SignedInAndSignedOut/SignedIn.jsx';
 export * from './components/SignedInAndSignedOut/SignedOut.jsx';
+export * from './hooks/useUser/useUser.jsx';