Merge pull request #149 from brionmario/next-sign-up-button

chore(react): add support for redirection based `SignUpButton` usage

Author: brionmario

.changeset/plenty-suits-repair.md

@@ -0,0 +1,7 @@
+---
+'@asgardeo/javascript': patch
+'@asgardeo/browser': patch
+'@asgardeo/react': patch
+---
+
+Add support for redirection based `SignUpButton` usage

packages/browser/src/index.ts

@@ -46,6 +46,7 @@ export * from './__legacy__/worker/worker-receiver';
 export {AsgardeoBrowserConfig} from './models/config';
 
 export {default as hasAuthParamsInUrl} from './utils/hasAuthParamsInUrl';
+export {default as navigate} from './utils/navigate';
 
 export {default as AsgardeoBrowserClient} from './AsgardeoBrowserClient';
 

packages/browser/src/utils/__tests__/navigate.test.ts

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {vi} from 'vitest';
+import navigate from '../navigate';
+
+describe('navigate', () => {
+  const originalLocation = window.location;
+
+  beforeEach(() => {
+    // @ts-ignore
+    window.history.pushState = vi.fn();
+    // @ts-ignore
+    window.dispatchEvent = vi.fn();
+    // @ts-ignore
+    window.location.assign = vi.fn();
+    // @ts-ignore
+    delete window.location;
+    // @ts-ignore
+    window.location = {
+      ...originalLocation,
+      assign: vi.fn(),
+      origin: 'https://localhost:5173',
+      href: 'https://localhost:5173/',
+    };
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    // @ts-ignore
+    window.location = originalLocation;
+  });
+
+  it('should call window.history.pushState with the correct arguments for same-origin', () => {
+    navigate('/test-url');
+    expect(window.history.pushState).toHaveBeenCalledWith(null, '', '/test-url');
+    expect(window.location.assign).not.toHaveBeenCalled();
+  });
+
+  it('should dispatch a PopStateEvent with state null for same-origin', () => {
+    navigate('/test-url');
+    expect(window.dispatchEvent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'popstate',
+        state: null,
+      }),
+    );
+    expect(window.location.assign).not.toHaveBeenCalled();
+  });
+
+  it('should use window.location.assign for cross-origin URLs', () => {
+    const crossOriginUrl = 'https://accounts.asgardeo.io/t/dxlab/accountrecoveryendpoint/register.do';
+    navigate(crossOriginUrl);
+    expect(window.location.assign).toHaveBeenCalledWith(crossOriginUrl);
+    expect(window.history.pushState).not.toHaveBeenCalled();
+    expect(window.dispatchEvent).not.toHaveBeenCalled();
+  });
+
+  it('should use window.location.assign for malformed URLs', () => {
+    const malformedUrl = 'http://[::1'; // Invalid URL
+    navigate(malformedUrl);
+    expect(window.location.assign).toHaveBeenCalledWith(malformedUrl);
+    expect(window.history.pushState).not.toHaveBeenCalled();
+    expect(window.dispatchEvent).not.toHaveBeenCalled();
+  });
+});

packages/browser/src/utils/navigate.ts

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Navigates to a new URL within the browser.
+ *
+ * - For same-origin URLs (relative paths or absolute URLs with the same origin),
+ *   uses the History API and dispatches a `popstate` event (SPA navigation).
+ * - For cross-origin URLs, performs a full page load using `window.location.assign`.
+ *
+ * This allows seamless navigation for both SPA routes and external links.
+ *
+ * @param url - The target URL to navigate to. Can be a path, query, or absolute URL.
+ *
+ * @example
+ * ```typescript
+ * // SPA navigation (same origin)
+ * navigate('/dashboard');
+ *
+ * // SPA navigation with query
+ * navigate('/search?q=asgardeo');
+ *
+ * // Cross-origin navigation (full page load)
+ * navigate('https://accounts.asgardeo.io/t/dxlab/accountrecoveryendpoint/register.do');
+ * ```
+ */
+const navigate = (url: string): void => {
+  try {
+    const targetUrl = new URL(url, window.location.origin);
+    if (targetUrl.origin === window.location.origin) {
+      window.history.pushState(null, '', targetUrl.pathname + targetUrl.search + targetUrl.hash);
+      window.dispatchEvent(new PopStateEvent('popstate', {state: null}));
+    } else {
+      window.location.assign(targetUrl.href);
+    }
+  } catch {
+    // If URL constructor fails (e.g., malformed URL), fallback to location.assign
+    window.location.assign(url);
+  }
+};
+
+export default navigate;

packages/browser/tsconfig.spec.json

@@ -3,11 +3,11 @@
   "compilerOptions": {
     "outDir": "dist",
     "module": "commonjs",
-    "types": ["jest", "node"]
+    "types": ["vitest/globals"]
   },
   "include": [
     "test-configs",
-    "jest.config.js",
+    "vitest.config.ts",
     "**/*.test.ts",
     "**/*.spec.ts",
     "**/*.test.js",

packages/browser/vitest.config.ts

@@ -26,5 +26,6 @@ export default defineConfig({
       instances: [{browser: 'chromium'}],
       provider: 'playwright',
     },
+    globals: true,
   },
 });

packages/javascript/package.json

@@ -42,7 +42,7 @@
     "typecheck": "tsc -p tsconfig.lib.json"
   },
   "devDependencies": {
-    "@types/node": "^22.15.3",
+    "@types/node": "^22.15.30",
     "@wso2/eslint-plugin": "catalog:",
     "@wso2/prettier-config": "catalog:",
     "esbuild": "^0.25.9",

packages/javascript/src/index.ts

@@ -1,3 +1,4 @@
+import { Platform } from './models/platforms';
 /**
  * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
  *
@@ -57,6 +58,7 @@ export {default as AsgardeoRuntimeError} from './errors/AsgardeoRuntimeError';
 export {AsgardeoAuthException} from './errors/exception';
 
 export {AllOrganizationsApiResponse} from './models/organization';
+export {Platform} from './models/platforms';
 export {
   EmbeddedSignInFlowInitiateResponse,
   EmbeddedSignInFlowStatus,
@@ -135,12 +137,15 @@ export {default as processUsername} from './utils/processUsername';
 export {default as deepMerge} from './utils/deepMerge';
 export {default as deriveOrganizationHandleFromBaseUrl} from './utils/deriveOrganizationHandleFromBaseUrl';
 export {default as extractUserClaimsFromIdToken} from './utils/extractUserClaimsFromIdToken';
+export {default as isRecognizedBaseUrlPattern} from './utils/isRecognizedBaseUrlPattern';
 export {default as extractPkceStorageKeyFromState} from './utils/extractPkceStorageKeyFromState';
 export {default as flattenUserSchema} from './utils/flattenUserSchema';
 export {default as generateUserProfile} from './utils/generateUserProfile';
 export {default as getLatestStateParam} from './utils/getLatestStateParam';
 export {default as generateFlattenedUserProfile} from './utils/generateFlattenedUserProfile';
+export {default as getRedirectBasedSignUpUrl} from './utils/getRedirectBasedSignUpUrl';
 export {default as getI18nBundles} from './utils/getI18nBundles';
+export {default as identifyPlatform} from './utils/identifyPlatform';
 export {default as isEmpty} from './utils/isEmpty';
 export {default as set} from './utils/set';
 export {default as get} from './utils/get';

packages/javascript/src/models/platforms.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Enumeration of supported identity platforms.
+ *
+ * - `Asgardeo`: Represents the Asgardeo cloud identity platform (asgardeo.io domains).
+ * - `IdentityServer`: Represents WSO2 Identity Server (on-prem or custom domains).
+ * - `Unknown`: Used when the platform cannot be determined from the configuration.
+ *
+ * This enum is used to distinguish between different identity providers and to
+ * enable platform-specific logic throughout the SDK.
+ */
+export enum Platform {
+  /** Asgardeo cloud identity platform (asgardeo.io domains) */
+  Asgardeo = 'ASGARDEO',
+  /** WSO2 Identity Server (on-prem or custom domains) */
+  IdentityServer = 'IDENTITY_SERVER',
+  /** Unknown or unsupported platform */
+  Unknown = 'UNKNOWN',
+}

packages/javascript/src/utils/__tests__/getRedirectBasedSignUpUrl.test.ts

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {describe, it, expect, vi, afterEach} from 'vitest';
+import {Config} from '../../models/config';
+import isRecognizedBaseUrlPattern from '../isRecognizedBaseUrlPattern';
+import getRedirectBasedSignUpUrl from '../getRedirectBasedSignUpUrl';
+
+vi.mock('../isRecognizedBaseUrlPattern', () => ({default: vi.fn()}));
+
+describe('getRedirectBasedSignUpUrl', () => {
+  const baseUrl: string = 'https://api.asgardeo.io/t/org';
+  const expectedBaseUrl: string = 'https://accounts.asgardeo.io/t/org';
+  const clientId: string = 'client123';
+  const applicationId: string = 'app456';
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('returns the correct sign-up URL if baseUrl is recognized and both params are present', () => {
+    (isRecognizedBaseUrlPattern as unknown as ReturnType<typeof vi.fn>).mockReturnValue(true);
+    const config: Config = {baseUrl, clientId, applicationId};
+    const url: URL = new URL(expectedBaseUrl + '/accountrecoveryendpoint/register.do');
+    url.searchParams.set('client_id', clientId);
+    url.searchParams.set('spId', applicationId);
+    expect(getRedirectBasedSignUpUrl(config)).toBe(url.toString());
+  });
+
+  it('returns the correct sign-up URL if only clientId is present', () => {
+    (isRecognizedBaseUrlPattern as unknown as ReturnType<typeof vi.fn>).mockReturnValue(true);
+    const config: Config = {baseUrl, clientId};
+    const url: URL = new URL(expectedBaseUrl + '/accountrecoveryendpoint/register.do');
+    url.searchParams.set('client_id', clientId);
+    expect(getRedirectBasedSignUpUrl(config)).toBe(url.toString());
+  });
+
+  it('returns the correct sign-up URL if only applicationId is present', () => {
+    (isRecognizedBaseUrlPattern as unknown as ReturnType<typeof vi.fn>).mockReturnValue(true);
+    const config: Config = {baseUrl, applicationId, clientId: ''};
+    const url: URL = new URL(expectedBaseUrl + '/accountrecoveryendpoint/register.do');
+    url.searchParams.set('spId', applicationId);
+    expect(getRedirectBasedSignUpUrl(config)).toBe(url.toString());
+  });
+
+  it('returns the correct sign-up URL if neither param is present', () => {
+    (isRecognizedBaseUrlPattern as unknown as ReturnType<typeof vi.fn>).mockReturnValue(true);
+    const config: Config = {baseUrl, clientId: ''};
+    const url: URL = new URL(expectedBaseUrl + '/accountrecoveryendpoint/register.do');
+    expect(getRedirectBasedSignUpUrl(config)).toBe(url.toString());
+  });
+
+  it('returns empty string if baseUrl is not recognized', () => {
+    (isRecognizedBaseUrlPattern as unknown as ReturnType<typeof vi.fn>).mockReturnValue(false);
+    const config: Config = {baseUrl, clientId, applicationId};
+    expect(getRedirectBasedSignUpUrl(config)).toBe('');
+  });
+});