feat(react): add signInUrl and signUpUrl to BaseConfig and update SignInButton behavior

Author: brionmario

packages/javascript/src/models/config.ts

@@ -76,6 +76,21 @@ export interface BaseConfig<T = unknown> extends WithPreferences {
    * scopes: ["openid", "profile", "email"]
    */
   scopes?: string | string[] | undefined;
+
+  /**
+   * Optional URL to redirect the user to sign-in.
+   * By default, this will be the sign-in page of Asgardeo.
+   * If you want to use a custom sign-in page, you can provide the URL here and use the `SignIn` component to render it.
+   */
+  signInUrl?: string | undefined;
+
+  /**
+   * Optional URL to redirect the user to sign-up.
+   * By default, this will be the sign-up page of Asgardeo.
+   * If you want to use a custom sign-up page, you can provide the URL here
+   * and use the `SignUp` component to render it.
+   */
+  signUpUrl?: string | undefined;
 }
 
 export interface WithPreferences {

packages/react/src/components/actions/SignInButton/SignInButton.tsx

@@ -71,7 +71,7 @@ const SignInButton: ForwardRefExoticComponent<SignInButtonProps & RefAttributes<
   HTMLButtonElement,
   SignInButtonProps
 >(({children, onClick, preferences, ...rest}: SignInButtonProps, ref: Ref<HTMLButtonElement>): ReactElement => {
-  const {signIn} = useAsgardeo();
+  const {signIn, signInUrl} = useAsgardeo();
   const {t} = useTranslation(preferences?.i18n);
 
   const [isLoading, setIsLoading] = useState(false);
@@ -80,7 +80,14 @@ const SignInButton: ForwardRefExoticComponent<SignInButtonProps & RefAttributes<
     try {
       setIsLoading(true);
 
-      await signIn();
+      // If a custom `signInUrl` is provided, use it for navigation.
+      if (signInUrl) {
+        window.history.pushState(null, '', signInUrl);
+
+        window.dispatchEvent(new PopStateEvent('popstate', {state: null}));
+      } else {
+        await signIn();
+      }
 
       if (onClick) {
         onClick(e);

packages/react/src/contexts/Asgardeo/AsgardeoContext.ts

@@ -22,6 +22,7 @@ import {Context, createContext} from 'react';
  * Props interface of {@link AsgardeoContext}
  */
 export type AsgardeoContextProps = {
+  signInUrl: string;
   afterSignInUrl: string;
   baseUrl: string;
   isInitialized: boolean;
@@ -58,8 +59,9 @@ export type AsgardeoContextProps = {
  * Context object for managing the Authentication flow builder core context.
  */
 const AsgardeoContext: Context<AsgardeoContextProps | null> = createContext<null | AsgardeoContextProps>({
-  afterSignInUrl: '',
-  baseUrl: '',
+  signInUrl: undefined,
+  afterSignInUrl: undefined,
+  baseUrl: undefined,
   isInitialized: false,
   isLoading: true,
   isSignedIn: false,

packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx

@@ -50,6 +50,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   children,
   scopes,
   preferences,
+  signInUrl,
   ...rest
 }: PropsWithChildren<AsgardeoProviderProps>): ReactElement => {
   const reRenderCheckRef: RefObject<boolean> = useRef(false);
@@ -230,6 +231,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   return (
     <AsgardeoContext.Provider
       value={{
+        signInUrl,
         afterSignInUrl,
         baseUrl,
         isInitialized: isInitializedSync,

samples/teamspace-react/src/components/Header/PublicActions.tsx

@@ -16,21 +16,7 @@ export default function PublicActions({className = '', showMobileActions = false
     // Mobile menu actions
     return (
       <div className="pt-4 border-t border-gray-200 space-y-2">
-        <SignInButton>
-          {({isLoading}) => (
-            <Button
-              onClick={() => {
-                navigate('/signin');
-              }}
-              disabled={isLoading}
-              size="lg"
-              color="primary"
-              variant="secondary"
-            >
-              {isLoading ? 'Signing in...' : 'Sign In'}
-            </Button>
-          )}
-        </SignInButton>
+        <SignInButton />
       </div>
     );
   }
@@ -39,22 +25,7 @@ export default function PublicActions({className = '', showMobileActions = false
     <div className={`flex items-center space-x-4 ${className}`}>
       {/* Desktop CTA */}
       <div className="hidden md:flex items-center space-x-4">
-        <SignInButton>Sign In with Redirect</SignInButton>
-        <SignInButton>
-          {({isLoading}) => (
-            <Button
-              onClick={() => {
-                navigate('/signin');
-              }}
-              disabled={isLoading}
-              size="lg"
-              color="primary"
-              variant="secondary"
-            >
-              {isLoading ? 'Signing in...' : 'Sign In'}
-            </Button>
-          )}
-        </SignInButton>
+        <SignInButton />
         <SignUpButton>
           {({isLoading}) => (
             <Button

samples/teamspace-react/src/main.tsx

@@ -11,6 +11,7 @@ createRoot(document.getElementById('root')!).render(
       afterSignInUrl={import.meta.env.VITE_ASGARDEO_AFTER_SIGN_IN_URL}
       afterSignOutUrl={import.meta.env.VITE_ASGARDEO_AFTER_SIGN_OUT_URL}
       clientId={import.meta.env.VITE_ASGARDEO_CLIENT_ID}
+      signInUrl={import.meta.env.VITE_ASGARDEO_SIGN_IN_URL}
       scopes={[
         'openid',
         'address',