Merge pull request #17 from omthakare16/main

updated Readme +added useStripe hook

Author: ghoshbishakh

README.md

@@ -39,6 +39,15 @@ If using Create React App, set :
 
 in `.env.local` file to make the environment variable accessible on `process.env`.
 
+```.env
+#.env.local
+
+REACT_APP_EASYAUTH_APP_URL=https://<your_subdomain>.app.easyauth.io
+REACT_APP_EASYAUTH_CLIENT_ID=<client_id>
+REACT_APP_EASYAUTH_REDIRECT_URL=<redirect_uri such as http://127.0.0.1:3000>
+
+```
+
 Example App:
 
 ```jsx
@@ -57,16 +66,11 @@ root.render(
     </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> 
+_User can also pass authority,clientId,redirectUri explicitly as a prop in EasauthProvider component._
 
+```jsx
 //App.js
 
 import { useEasyauth, UserProfile } from "@easyauth.io/easyauth-react";
@@ -118,6 +122,16 @@ function App() {
 export default App;
 ```
 
+```jsx
+<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>
+```
+
 _For further details and examples, please refer to our [Documentation](https://easyauth.io/docs/quickstart/react/)._
 
 ## License

src/api/api.js

@@ -1,5 +1,18 @@
 const BASE_URL = process.env.REACT_APP_EASYAUTH_APP_URL + '/tenantbackend';
 
+
+const tokenLocalStorage = () => {
+  let result;
+  const keys = Object.keys(localStorage);
+  keys.forEach((key) => {
+    if (key.startsWith('oidc.user')) {
+      result = key;
+    }
+  });
+  const value = localStorage.getItem(result);
+  return JSON.parse(value)?.id_token;
+};
+
 const commonAPICall = async (
     PATH,
     METHOD = 'GET',
@@ -13,7 +26,10 @@ const commonAPICall = async (
   const response = await fetch(FULLPATH, {
     method: METHOD,
     body: BODY,
-    headers: headers,
+    headers: {
+      ...headers,
+      Authorization: `Bearer ${tokenLocalStorage()}`,
+    },
   });
 
   return response;
@@ -36,13 +52,29 @@ const postAPI = async (PATH, DATA) => {
   return response;
 };
 
-const getProfile = async (token) => {
-  const headers = {Authorization: `Bearer ${token}`};
-  const response = await getAPI('/api/profile', headers);
-  if (!response.ok) {
-    throw new Error(`Request failed with status ${response.status}`);
-  }
+const getProfile = async () => {
+  const response = await getAPI('/api/profile');
+  return response;
+};
+const getStripeCreatePortalSessionUrl = async () => {
+  const response = await getAPI('/api/stripe/create-portal-session');
+  return response;
+};
+const getStripeCheckoutUrl = async (priceId) => {
+  const response = await getAPI(`/api/stripe/checkout/${priceId}`);
+  return response;
+};
+const getStripeSubscriptions = async () => {
+  const response = await getAPI('/api/stripe/subscriptions');
   return response;
 };
 
-export {commonAPICall, getAPI, postAPI, getProfile};
+export {
+  commonAPICall,
+  getAPI,
+  postAPI,
+  getProfile,
+  getStripeCreatePortalSessionUrl,
+  getStripeCheckoutUrl,
+  getStripeSubscriptions,
+};

src/components/EasyauthProvider/EasyauthProvider.jsx

@@ -28,8 +28,8 @@ export const EasyauthProvider = ({
 };
 
 EasyauthProvider.propTypes = {
-  authority: PropTypes.string.isRequired,
-  clientId: PropTypes.string.isRequired,
-  redirectUri: PropTypes.string.isRequired,
+  authority: PropTypes.string,
+  clientId: PropTypes.string,
+  redirectUri: PropTypes.string,
   children: PropTypes.node,
 };

src/components/UserProfile/UserProfile.jsx

@@ -9,8 +9,7 @@ export const UserProfile = ({loader}) => {
 
   useEffect(() => {
     (async () => {
-      const token = auth.user?.access_token;
-      const response = await getProfile(token);
+      const response = await getProfile();
       setProfile(response.data);
     })();
   }, [auth]);

src/hooks/useStripe/useStripe.jsx

@@ -0,0 +1,22 @@
+import {
+  getStripeCheckoutUrl,
+  getStripeCreatePortalSessionUrl,
+  getStripeSubscriptions,
+} from '../../api/api.js';
+
+export const useStripe = () => {
+  const createPortalSession = async () => {
+    const response = await getStripeCreatePortalSessionUrl();
+    return response.data.url;
+  };
+
+  const checkout = async (priceId) => {
+    const response = await getStripeCheckoutUrl(priceId);
+    return response.data.url;
+  };
+  const subscriptions = async () => {
+    const response = await getStripeSubscriptions();
+    return response.data;
+  };
+  return {createPortalSession, checkout, subscriptions};
+};

src/hooks/useUser/useUser.jsx

@@ -5,25 +5,22 @@ 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);
+      const response = await getProfile();
       setUser(response.data);
     };
 
-    if (token) {
-      fetchUser();
-    }
-  }, [token]);
+    fetchUser();
+  }, [auth]);
 
   return {
     isAuthenticated: auth.isAuthenticated,
     isLoading: Object.keys(user).length ?
-        false :
-        auth.isAuthenticated ?
-        true :
-        false,
+      false :
+      auth.isAuthenticated ?
+      true :
+      false,
     user: user,
   };
 };

src/index.js

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