asgardeo · brionmario · Jun 17, 2025 · Jun 6, 2025 · Jun 6, 2025 · Jun 6, 2025
diff --git a/.changeset/smart-spiders-film.md b/.changeset/smart-spiders-film.md
@@ -0,0 +1,7 @@
+---
+'@asgardeo/browser': minor
+'@asgardeo/javascript': minor
+'@asgardeo/react': minor
+---
+
+Support `SignIn` component in `@asgardeo/react`.
diff --git a/README.md b/README.md
@@ -34,6 +34,7 @@ This repository contains the source code of JavaScript SDKs that can be used to
 | [![@asgardeo/browser](https://img.shields.io/npm/v/@asgardeo/browser?color=%234B32C3&label=%40asgardeo%2Fbrowser&logo=firefox)](./packages/browser/) | Browser-based JavaScript SDK |
 | [![@asgardeo/nextjs](https://img.shields.io/npm/v/@asgardeo/nextjs?color=%23000000&label=%40asgardeo%2Fnext&logo=next.js)](./packages/next/) | Next.js SDK for building applications with Asgardeo |
 | [![@asgardeo/node](https://img.shields.io/npm/v/@asgardeo/node?color=%23339933&label=%40asgardeo%2Fnode&logo=node.js)](./packages/node/) | Node.js SDK for server-side integration |
+| [![@asgardeo/express](https://img.shields.io/npm/v/@asgardeo/express?color=%23339933&label=%40asgardeo%2Fexpress&logo=express)](./packages/express/) | Express.js SDK for server-side integration |
 | [![@asgardeo/nuxt](https://img.shields.io/npm/v/@asgardeo/nuxt?color=%2300DC82&label=%40asgardeo%2Fnuxt&logo=nuxt)](./packages/nuxt/) | Nuxt.js SDK for building applications with Asgardeo |
 | [![@asgardeo/react](https://img.shields.io/npm/v/@asgardeo/react?color=%2361DAFB&label=%40asgardeo%2Freact&logo=react)](./packages/react/) | React SDK for building applications with Asgardeo |
 | [![@asgardeo/vue](https://img.shields.io/npm/v/@asgardeo/vue?color=%234FC08D&label=%40asgardeo%2Fvue&logo=vue.js)](./packages/vue/) | Vue.js SDK for building applications with Asgardeo |

diff --git a/docs/src/react/components/asgardeo-provider.md b/docs/src/react/components/asgardeo-provider.md
@@ -38,9 +38,9 @@ import { AsgardeoProvider } from "@asgardeo/react";
 
   - `baseURL`: The base URL of asgardeo.
 
-  - `signInRedirectURL`: The URL where users should be redirected after they sign in. This should be a page in your application.
+  - `afterSignInUrl`: The URL where users should be redirected after they sign in. This should be a page in your application.
 
-  - `clientID`: The ID of your application. You get this when you register your application with Asgardeo.
+  - `clientId`: The ID of your application. You get this when you register your application with Asgardeo.
 
   - `scope`: The scope of the access request. This is a list of scopes separated by spaces. Scopes allow your application to request access only to the resources it needs, and also allow users to control how much access they grant to your application.
 

diff --git a/docs/src/react/hooks/use-authentication.md b/docs/src/react/hooks/use-authentication.md
@@ -31,7 +31,7 @@ import { useAuthentication } from "@asgardeo/react";
 Then, you can use it in your component:
 
 ```ts
-const { user, isAuthenticated, accessToken, signOut } = useAuthentication();
+const { user, isSignedIn, accessToken, signOut } = useAuthentication();
 ```
 
 ## Return Value
@@ -40,7 +40,7 @@ The `useAuthentication` hook returns an object with the following properties:
 
 - `user`: The current user. This is an object that contains information about the user.
 
-- `isAuthenticated`: A boolean that indicates whether the user is authenticated.
+- `isSignedIn`: A boolean that indicates whether the user is authenticated.
 
 - `accessToken`: The access token for the authenticated user.
 
@@ -49,9 +49,9 @@ The `useAuthentication` hook returns an object with the following properties:
 Here's an example of how to use these values:
 
 ```ts
-const { user, isAuthenticated, signOut } = useAuthentication();
+const { user, isSignedIn, signOut } = useAuthentication();
 
-if (isAuthenticated) {
+if (isSignedIn) {
   console.log(`User ${user.username} is authenticated.`);
 } else {
   console.log("User is not authenticated.");

diff --git a/docs/src/react/introduction.md b/docs/src/react/introduction.md
@@ -71,9 +71,9 @@ Then, wrap your application with the `AsgardeoProvider` and pass the basic confi
 <AsgardeoProvider
     config={{
       baseUrl: "https://api.asgardeo.io/t/org_name",
-      clientID: "gqtroUbA1Qsulqr*****",
+      clientId: "gqtroUbA1Qsulqr*****",
       scope: ["openid", "internal_login", "profile"],
-      signInRedirectURL: "https://domain_name:8080",
+      afterSignInUrl: "https://domain_name:8080",
     }}>
     <App />
 </AsgardeoProvider>

diff --git a/package.json b/package.json
@@ -5,13 +5,13 @@
   "description": "Workspace to hold the Asgardeo JavaScript SDKs.",
   "author": "WSO2",
   "license": "Apache-2.0",
-  "homepage": "https://github.com/asgardeo/javascript#readme",
+  "homepage": "https://github.com/asgardeo/web-ui-sdks#readme",
   "bugs": {
-    "url": "https://github.com/asgardeo/javascript/issues"
+    "url": "https://github.com/asgardeo/web-ui-sdks/issues"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/asgardeo/javascript"
+    "url": "https://github.com/asgardeo/web-ui-sdks"
   },
   "keywords": [
     "asgardeo",
@@ -24,6 +24,7 @@
     "lint": "nx run-many --target=lint --all --parallel",
     "publish:packages": "changeset publish",
     "test": "nx run-many --target=test --all --parallel",
+    "typecheck": "nx run-many --target=typecheck --all --parallel",
     "version:packages": "changeset version && pnpm install --lockfile-only"
   },
   "devDependencies": {
@@ -39,4 +40,4 @@
   "publishConfig": {
     "access": "restricted"
   }
-}
+}
diff --git a/packages/__legacy__/core/src/api/authenticate.ts b/packages/__legacy__/core/src/api/authenticate.ts
@@ -44,7 +44,7 @@ const authenticate = async (props: AuthenticateProps): Promise<AuthApiResponse>
     };
 
     /* Getting baseURL from authClient's data layer */
-    const {baseUrl} = await AuthClient.getInstance().getDataLayer().getConfigData();
+    const {baseUrl} = await AuthClient.getInstance().getStorageManager().getConfigData();
 
     authnRequest = new Request(`${baseUrl}/oauth2/authn`, requestOptions);
   } catch (error) {

diff --git a/packages/__legacy__/core/src/api/authorize.ts b/packages/__legacy__/core/src/api/authorize.ts
@@ -32,7 +32,9 @@ const authorize = async (): Promise<AuthApiResponse> => {
 
   try {
     const authInstace: UIAuthClient = AuthClient.getInstance();
-    const params: Map<string, string> = await authInstace.getAuthorizationURLParams();
+    // FIXME: We should be able to get the URL itself.
+    // const params: Map<string, string> = await authInstace.getAuthorizationURLParams();
+    const params: Map<string, string> = new Map();
 
     const formBody: URLSearchParams = new URLSearchParams();
 
@@ -41,7 +43,7 @@ const authorize = async (): Promise<AuthApiResponse> => {
     });
 
     /* Save the state temporarily in the data layer, this needs to be passed when token is requested */
-    await authInstace.getDataLayer().setTemporaryDataParameter('state', params.get('state'));
+    await authInstace.getStorageManager().setTemporaryDataParameter('state', params.get('state'));
 
     const headers: Headers = new Headers();
     headers.append('Accept', 'application/json');
@@ -53,7 +55,7 @@ const authorize = async (): Promise<AuthApiResponse> => {
       method: 'POST',
     };
 
-    authzURL = (await authInstace.getOIDCServiceEndpoints()).authorizationEndpoint;
+    authzURL = (await authInstace.getOpenIDProviderEndpoints()).authorizationEndpoint;
   } catch (error) {
     throw new AsgardeoUIException('JS_UI_CORE-AUTHZ-A-NF', 'Authorization request building failed', error.stack);
   }

diff --git a/packages/__legacy__/core/src/api/get-branding-preference-text.ts b/packages/__legacy__/core/src/api/get-branding-preference-text.ts
@@ -50,7 +50,7 @@ const getBrandingPreferenceText = async (
   params.append('screen', screen);
   params.append('type', type);
 
-  const {baseUrl} = await AuthClient.getInstance().getDataLayer().getConfigData();
+  const {baseUrl} = await AuthClient.getInstance().getStorageManager().getConfigData();
   const textUrl: string = `${baseUrl}/api/server/v1/branding-preference/text/resolve`;
   const urlWithParams: string = `${textUrl}?${params.toString()}`;
   let response: Response;

diff --git a/packages/__legacy__/core/src/api/get-branding-preference.ts b/packages/__legacy__/core/src/api/get-branding-preference.ts
@@ -31,7 +31,7 @@ const getBrandingPreference = async (): Promise<BrandingPreferenceAPIResponse> =
     baseUrl,
     type = BrandingPreferenceTypes.Org,
     name = 'WSO2',
-  } = await AuthClient.getInstance().getDataLayer().getConfigData();
+  } = await AuthClient.getInstance().getStorageManager().getConfigData();
   const brandingUrl: string = `${baseUrl}/api/server/v1/branding-preference?type=${type}&name=${name}`;
   let response: Response;
 

diff --git a/packages/__legacy__/core/src/api/get-profile-information.ts b/packages/__legacy__/core/src/api/get-profile-information.ts
@@ -35,7 +35,7 @@ const getProfileInformation = async (): Promise<MeAPIResponse> => {
   let response: Response;
 
   try {
-    baseUrl = (await AuthClient.getInstance().getDataLayer().getConfigData()).baseUrl;
+    baseUrl = (await AuthClient.getInstance().getStorageManager().getConfigData()).baseUrl;
     accessToken = await AuthClient.getInstance().getAccessToken();
   } catch (error) {
     throw new AsgardeoUIException(

diff --git a/packages/__legacy__/core/src/api/sign-out.ts b/packages/__legacy__/core/src/api/sign-out.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {AuthClient, ResponseMode} from '../auth-client';
+import {AuthClient} from '../auth-client';
 import AsgardeoUIException from '../exception';
 import {UIAuthClient} from '../models/auth-config';
 
@@ -49,9 +49,9 @@ const signOut = async (): Promise<void> => {
   const authClient: UIAuthClient = AuthClient.getInstance();
 
   try {
-    formBody.append('id_token_hint', await authClient.getIDToken());
-    formBody.append('client_id', (await authClient.getDataLayer().getConfigData()).clientID);
-    formBody.append('response_mode', ResponseMode.Direct);
+    formBody.append('id_token_hint', await authClient.getIdToken());
+    formBody.append('client_id', (await authClient.getStorageManager().getConfigData()).clientId);
+    formBody.append('response_mode', 'direct');
   } catch (error) {
     throw new AsgardeoUIException('JS_UI_CORE-SIGNOUT-SO-IV', 'Failed to build the body of the signout request.');
   }
@@ -63,7 +63,7 @@ const signOut = async (): Promise<void> => {
   };
 
   try {
-    const {endSessionEndpoint} = await authClient.getOIDCServiceEndpoints();
+    const {endSessionEndpoint} = await authClient.getOpenIDProviderEndpoints();
     signOutUrl = endSessionEndpoint;
   } catch (error) {
     throw new AsgardeoUIException('JS_UI_CORE-SIGNOUT-SO-NF', 'Failed to retrieve the sign out endpoint.');

diff --git a/packages/__legacy__/core/src/auth-client.ts b/packages/__legacy__/core/src/auth-client.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {AsgardeoAuthClient, Store, Crypto, ResponseMode} from '@asgardeo/auth-js';
+import {AsgardeoAuthClient, Store, Crypto} from '@asgardeo/auth-js';
 import {UIAuthClient, UIAuthConfig} from './models/auth-config';
 import {BrandingPreferenceTypes} from './models/branding-api-response';
 
@@ -50,7 +50,7 @@ export class AuthClient {
         enableConsoleBranding: authClientConfig?.enableConsoleBranding ?? true,
         enableConsoleTextBranding: authClientConfig?.enableConsoleTextBranding ?? true,
         name: authClientConfig?.name ?? DEFAULT_NAME,
-        responseMode: ResponseMode.Direct,
+        responseMode: 'direct',
         type: authClientConfig?.type ?? BrandingPreferenceTypes.Org,
       };
 
@@ -63,4 +63,4 @@ export class AuthClient {
 }
 
 /* Interfaces, classes and enums required from the auth-js package */
-export {Crypto, JWKInterface, Store, AsgardeoAuthClient, TokenResponse, ResponseMode} from '@asgardeo/auth-js';
+export {Crypto, JWKInterface, Store, AsgardeoAuthClient, TokenResponse} from '@asgardeo/auth-js';
diff --git a/packages/__legacy__/core/src/branding/get-branding.ts b/packages/__legacy__/core/src/branding/get-branding.ts
@@ -42,7 +42,7 @@ const getBranding = async (props: GetBrandingProps): Promise<Branding> => {
     let brandingFromConsole: BrandingPreferenceAPIResponse;
 
     try {
-      const {enableConsoleBranding} = await AuthClient.getInstance().getDataLayer().getConfigData();
+      const {enableConsoleBranding} = await AuthClient.getInstance().getStorageManager().getConfigData();
 
       if (enableConsoleBranding) {
         brandingFromConsole = await getBrandingPreference();

diff --git a/packages/__legacy__/core/src/i18n/get-localization.ts b/packages/__legacy__/core/src/i18n/get-localization.ts
@@ -38,7 +38,7 @@ const getLocalization = async (props: GetLocalizationProps): Promise<TextObject>
 
   let textFromConsoleBranding: BrandingPreferenceTextAPIResponse;
 
-  const configData: AuthClientConfig<UIAuthConfig> = await AuthClient.getInstance().getDataLayer().getConfigData();
+  const configData: AuthClientConfig<UIAuthConfig> = await AuthClient.getInstance().getStorageManager().getConfigData();
 
   try {
     if (configData.enableConsoleTextBranding) {

diff --git a/packages/__legacy__/react/src/components/SignIn/SignIn.tsx b/packages/__legacy__/react/src/components/SignIn/SignIn.tsx
@@ -78,7 +78,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
   const [showSelfSignUp, setShowSelfSignUp] = useState<boolean>(showSignUp);
   const [componentBranding, setComponentBranding] = useState<Branding>();
 
-  const {isAuthenticated} = useAuthentication();
+  const {isSignedIn} = useAuthentication();
   const {config} = useConfig();
 
   const authContext: AuthContext | undefined = useContext(AsgardeoContext);
@@ -159,7 +159,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
           /**
            * Check the origin of the message to ensure it's from the popup window
            */
-          if (event.origin !== config.signInRedirectURL) return;
+          if (event.origin !== config.afterSignInUrl) return;
 
           const {code, state} = event.data;
 
@@ -182,7 +182,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
       authContext?.setAuthResponse(resp);
 
       const authInstance: UIAuthClient = AuthClient.getInstance();
-      const state: string = (await authInstance.getDataLayer().getTemporaryDataParameter('state')).toString();
+      const state: string = (await authInstance.getStorageManager().getTemporaryDataParameter('state')).toString();
 
       await authInstance.requestAccessToken(resp.authData.code, resp.authData.session_state, state);
 
@@ -368,7 +368,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
         {showLogo && !(isLoading || authContext?.isComponentLoading) && (
           <UISignIn.Image className="asgardeo-sign-in-logo" src={imgUrl} />
         )}
-        {authContext?.authResponse?.flowStatus !== FlowStatus.SuccessCompleted && !isAuthenticated && (
+        {authContext?.authResponse?.flowStatus !== FlowStatus.SuccessCompleted && !isSignedIn && (
           <>
             {renderSignIn()}
 
@@ -397,7 +397,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
             )}
           </>
         )}
-        {(authContext?.authResponse?.flowStatus === FlowStatus.SuccessCompleted || isAuthenticated) && (
+        {(authContext?.authResponse?.flowStatus === FlowStatus.SuccessCompleted || isSignedIn) && (
           <div style={{backgroundColor: 'white', padding: '1rem'}}>Successfully Authenticated</div>
         )}
       </UISignIn>

diff --git a/packages/__legacy__/react/src/components/SignedIn/SignedIn.tsx b/packages/__legacy__/react/src/components/SignedIn/SignedIn.tsx
@@ -30,9 +30,9 @@ import SignedProps from '../../models/signed-props';
  */
 const SignedIn: FC<PropsWithChildren<SignedProps>> = (props: PropsWithChildren<SignedProps>) => {
   const {fallback = null, children} = props;
-  const {isAuthenticated} = useAuthentication();
+  const {isSignedIn} = useAuthentication();
 
-  return isAuthenticated ? children : fallback;
+  return isSignedIn ? children : fallback;
 };
 
 export default SignedIn;
diff --git a/packages/__legacy__/react/src/components/SignedOut/SignedOut.tsx b/packages/__legacy__/react/src/components/SignedOut/SignedOut.tsx
@@ -30,9 +30,9 @@ import SignedProps from '../../models/signed-props';
  */
 const SignedOut: FC<PropsWithChildren<SignedProps>> = (props: PropsWithChildren<SignedProps>) => {
   const {fallback = null, children} = props;
-  const {isAuthenticated} = useAuthentication();
+  const {isSignedIn} = useAuthentication();
 
-  return !isAuthenticated ? children : fallback;
+  return !isSignedIn ? children : fallback;
 };
 
 export default SignedOut;
diff --git a/packages/__legacy__/react/src/hooks/use-authentication.ts b/packages/__legacy__/react/src/hooks/use-authentication.ts
@@ -26,13 +26,13 @@ import UseAuthentication from '../models/use-authentication';
  * `useAuthentication` is a custom hook that provides access to the authentication context.
  * It returns an object containing the current user, the authentication status, the access token, and a sign out function.
  *
- * @returns {UseAuthentication} An object containing the current user (`user`), the authentication status (`isAuthenticated`),
+ * @returns {UseAuthentication} An object containing the current user (`user`), the authentication status (`isSignedIn`),
  * the access token (`accessToken`), and a sign out function (`signOut`).
  */
 const useAuthentication = (): UseAuthentication => {
   const contextValue: AuthContext = useContext(AsgardeoContext);
 
-  const {accessToken, authResponse, isAuthenticated, isGlobalLoading, setUsername, user, username} = contextValue;
+  const {accessToken, authResponse, isSignedIn, isGlobalLoading, setUsername, user, username} = contextValue;
 
   const signOut: () => void = () => {
     signOutApiCall().then(() => {
@@ -46,7 +46,7 @@ const useAuthentication = (): UseAuthentication => {
   return {
     accessToken,
     authResponse,
-    isAuthenticated,
+    isSignedIn,
     isGlobalLoading,
     setUsername,
     signOut,

diff --git a/packages/__legacy__/react/src/models/auth-context.ts b/packages/__legacy__/react/src/models/auth-context.ts
@@ -23,7 +23,7 @@ interface AuthContext {
   authResponse: AuthApiResponse;
   config: UIAuthConfig;
   isAuthLoading: boolean;
-  isAuthenticated: boolean | undefined;
+  isSignedIn: boolean | undefined;
   isBrandingLoading: boolean;
   isComponentLoading: boolean;
   isGlobalLoading: boolean;

diff --git a/packages/__legacy__/react/src/models/use-authentication.ts b/packages/__legacy__/react/src/models/use-authentication.ts
@@ -21,7 +21,7 @@ import {AuthApiResponse, MeAPIResponse} from '@asgardeo/js';
 interface UseAuthentication {
   accessToken: string;
   authResponse: AuthApiResponse;
-  isAuthenticated: Promise<boolean> | boolean;
+  isSignedIn: Promise<boolean> | boolean;
   isGlobalLoading: boolean;
   setUsername: (username: string) => void;
   signOut: () => void;