Add a Sign Up button and provide workaround for auto login.

kfone-website/.env.example

@@ -10,3 +10,4 @@ REACT_APP_BASE_API_ENDPOINT=<BASE URL OF CHOREO HOSTED API>
 REACT_APP_CHOREO_ORGANIZATION=<ORGANIZATION OF CHOREO HOSTED API>
 REACT_APP_CHOREO_AUTH_TOKEN=<CHOREO AUTH TOKEN TO GET ACCESS TOKEN>
 REACT_APP_MY_ACCOUNT_URL=<MY ACCOUNT APP URL>
+REACT_APP_SIGN_UP_URL=<SELF SIGN UP URL ex: 'https://accounts.asgardeo.io/t/kfone/accountrecoveryendpoint/register.do?client_id=<CLIENT_ID>&sp=<SP_NAME>'>

kfone-website/src/config.js

@@ -23,6 +23,12 @@ const appConfig = {
   signInRedirectURL: process.env.REACT_APP_ASGARDEO_LOGIN_CALLBACK_URL ?? '',
   signOutRedirectURL: process.env.REACT_APP_ASGARDEO_LOGOUT_CALLBACK_URL ?? '',
   scope: ['openid', 'profile', 'email'],
+  signUpUrl: process.env.REACT_APP_SIGN_UP_URL
+    ? process.env.REACT_APP_SIGN_UP_URL.replace(
+        '{{clientId}}',
+        process.env.REACT_APP_ASGARDEO_CLIENT_ID ?? ''
+      )
+    : '',
   stsConfig: {
     client_id: process.env.REACT_APP_CHOREO_CLIENT_ID ?? '',
     orgHandle: process.env.REACT_APP_CHOREO_ORGANIZATION ?? '',

kfone-website/src/layouts/Navbar.jsx

@@ -22,6 +22,7 @@ import { HiMenuAlt3 } from 'react-icons/hi';
 import { GiCrossedAirFlows } from 'react-icons/gi';
 import { GrClose } from 'react-icons/gr';
 import RoundedIconButton from '../components/buttons/RoundedIconButton';
+import appConfig from '../config';
 
 const Navbar = (props) => {
   const { handleLogin, state } = props;
@@ -56,6 +57,11 @@ const Navbar = (props) => {
         </ul>
       </div>
       <ul className="flex justify-end items-center">
+        {!state?.isAuthenticated && (
+          <li className="px-4 text-red">
+            <a href={appConfig.signUpUrl}>Sign Up</a>
+          </li>
+        )}
         <li className="px-4">
           <RoundedIconButton
             handleLogin={handleLogin}

kfone-website/src/pages/HomePage.jsx

@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useAuthContext } from '@asgardeo/auth-react';
 import { useLocation, useHistory } from 'react-router-dom';
 import BusinessPlansSection from '../layouts/BusinessPlansSection';
@@ -26,13 +26,16 @@ import Hero from '../layouts/Hero';
 import QuickActionsSection from '../layouts/QuickActionsSection';
 import UnlimitedPlansSection from '../layouts/UnlimitedPlansSection';
 import GeneralTemplate from '../templates/GeneralTemplate';
+import Loading from '../layouts/Loading';
 
 const HomePage = () => {
   const { state, signIn, getDecodedIDPIDToken, trySignInSilently } = useAuthContext();
   const query = new URLSearchParams(useLocation().search);
   const reRenderCheckRef = useRef(false);
   const history = useHistory();
 
+  const [showAutoLoginLoader, setShowAutoLoginLoader] = useState(false);
+
   useEffect(() => {
     reRenderCheckRef.current = true;
 
@@ -50,6 +53,19 @@ const HomePage = () => {
     })();
   }, []);
 
+  /**
+   * This is a workaround to trigger a login request when users come
+   * from the Sign Up path with auto login enabled.
+   */
+  useEffect(() => {
+    const shouldAutoLogin = query.get('autologin');
+
+    if (shouldAutoLogin) {
+      setShowAutoLoginLoader(true);
+      signIn();
+    }
+  }, [query]);
+
   const handleLogin = () => {
     if (state?.isAuthenticated) {
       history.push('/my-kfone');
@@ -67,6 +83,10 @@ const HomePage = () => {
       });
   };
 
+  if (showAutoLoginLoader) {
+    return <Loading />;
+  }
+
   return (
     <GeneralTemplate handleLogin={handleLogin} state={state}>
       <Hero />