Merge pull request #193 from aclar48/vercel-integration

Update to Support Vercel deployment of Sample App

Author: Piyush-85

Sample-01/.gitignore

@@ -38,3 +38,4 @@ yarn-error.log*
 
 # vercel
 .vercel
+.env*.local

Sample-01/components/Content.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Row, Col } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLink } from '@fortawesome/free-solid-svg-icons';
 
 import contentData from '../utils/contentData';
 
@@ -14,7 +15,7 @@ const Content = () => (
         <Col key={i} md={5} className="mb-4">
           <h6 className="mb-3">
             <a href={col.link}>
-              <FontAwesomeIcon icon="link" className="mr-2" />
+              <FontAwesomeIcon icon="fa-solid fa-link" className="mr-2" />
               {col.title}
             </a>
           </h6>

Sample-01/components/NavBarItem.jsx

@@ -1,15 +1,18 @@
 import React from 'react';
 import { usePathname } from 'next/navigation';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+
+library.add(fas);
 
 const NavBarItem = ({ children, href, className, icon, tabIndex, testId }) => {
   const pathname = usePathname();
   const activeClass = 'navbar-item-active';
   const activeClasses = className ? `${className} ${activeClass}` : activeClass;
-
   return (
     <span className="d-inline-flex align-items-center navbar-item">
-      {icon && <FontAwesomeIcon icon={icon} className="mr-3" />}
+      {icon && icon.length > 0 && <FontAwesomeIcon icon={`fa-solid fa-${icon}`} className="mr-3" />}
       <span className={pathname === href ? activeClasses : className} tabIndex={tabIndex} data-testid={testId}>
         {children}
       </span>

Sample-01/components/PageLink.jsx

@@ -5,12 +5,10 @@ import NavBarItem from './NavBarItem';
 
 const PageLink = ({ children, href, className, icon, tabIndex, testId }) => {
   return (
-    <Link legacyBehavior href={href}>
-      <a>
-        <NavBarItem href={href} className={className} icon={icon} tabIndex={tabIndex} testId={testId}>
-          {children}
-        </NavBarItem>
-      </a>
+    <Link href={href}>
+      <NavBarItem href={href} className={className} icon={icon} tabIndex={tabIndex} testId={testId}>
+        {children}
+      </NavBarItem>
     </Link>
   );
 };

Sample-01/lib/auth0.js

@@ -7,8 +7,8 @@ export const auth0 = new Auth0Client({
   // domain: process.env.AUTH0_DOMAIN,
   // clientId: process.env.AUTH0_CLIENT_ID,
   // clientSecret: process.env.AUTH0_CLIENT_SECRET,
-  // appBaseUrl: process.env.APP_BASE_URL,
   // secret: process.env.AUTH0_SECRET,
+  appBaseUrl: process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : process.env.APP_BASE_URL,
   authorizationParameters: {
     // In v4, the AUTH0_SCOPE and AUTH0_AUDIENCE environment variables are no longer automatically picked up by the SDK.
     // Instead, we need to provide the values explicitly.