asgardeo · brionmario · Jul 9, 2025 · Jul 8, 2025 · Jul 8, 2025 · Jul 8, 2025
diff --git a/.changeset/warm-dots-obey.md b/.changeset/warm-dots-obey.md
@@ -0,0 +1,8 @@
+---
+'@asgardeo/javascript': patch
+'@asgardeo/browser': patch
+'@asgardeo/nextjs': patch
+'@asgardeo/react': patch
+---
+
+Expose `http` module instead of `fetch`
diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
@@ -813,7 +813,7 @@ export class AsgardeoSPAClient {
    *
    * @preserve
    */
-  public async getAccessToken(): Promise<string> {
+  public async getAccessToken(sessionId?: string): Promise<string> {
     await this._validateMethod();
 
     if (this._storage && [(BrowserStorage.WebWorker, BrowserStorage.BrowserMemory)].includes(this._storage)) {
@@ -827,7 +827,7 @@ export class AsgardeoSPAClient {
     }
     const mainThreadClient = this._client as MainThreadClientInterface;
 
-    return mainThreadClient.getAccessToken();
+    return mainThreadClient.getAccessToken(sessionId);
   }
 
   /**

diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -380,7 +380,7 @@ export const MainThreadClient = async (
   const getOpenIDProviderEndpoints = async (): Promise<OIDCEndpoints> =>
     _authenticationHelper.getOpenIDProviderEndpoints();
 
-  const getAccessToken = async (): Promise<string> => _authenticationHelper.getAccessToken();
+  const getAccessToken = async (sessionId?: string): Promise<string> => _authenticationHelper.getAccessToken(sessionId);
 
   const getStorageManager = async (): Promise<StorageManager<MainThreadClientConfig>> =>
     _authenticationHelper.getStorageManager();

diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -679,8 +679,8 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     return this._authenticationClient.getOpenIDProviderEndpoints() as any;
   }
 
-  public async getAccessToken(): Promise<string> {
-    return this._authenticationClient.getAccessToken();
+  public async getAccessToken(sessionId?: string): Promise<string> {
+    return this._authenticationClient.getAccessToken(sessionId);
   }
 
   public async getIDPAccessToken(): Promise<string> {

diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
@@ -64,7 +64,7 @@ export interface MainThreadClientInterface {
   getConfigData(): Promise<AuthClientConfig<MainThreadClientConfig>>;
   getIdToken(): Promise<string>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
-  getAccessToken(): Promise<string>;
+  getAccessToken(sessionId?: string): Promise<string>;
   getStorageManager(): Promise<StorageManager<MainThreadClientConfig>>;
   isSignedIn(): Promise<boolean>;
   reInitialize(config: Partial<AuthClientConfig<MainThreadClientConfig>>): Promise<void>;

diff --git a/packages/javascript/src/AsgardeoJavaScriptClient.ts b/packages/javascript/src/AsgardeoJavaScriptClient.ts
@@ -78,6 +78,8 @@ abstract class AsgardeoJavaScriptClient<T = Config> implements AsgardeoClient<T>
   abstract signUp(options?: SignUpOptions): Promise<void>;
   abstract signUp(payload: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse>;
   abstract signUp(payload?: unknown): Promise<void> | Promise<EmbeddedFlowExecuteResponse>;
+
+  abstract getAccessToken(sessionId?: string): Promise<string>;
 }
 
 export default AsgardeoJavaScriptClient;
diff --git a/packages/javascript/src/models/client.ts b/packages/javascript/src/models/client.ts
@@ -187,4 +187,11 @@ export interface AsgardeoClient<T> {
    * @returns A promise that resolves to an EmbeddedFlowExecuteResponse containing the flow execution details.
    */
   signUp(payload: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse>;
+
+  /**
+   * Retrieves the access token for the current session.
+   * @param sessionId - Optional session ID to retrieve the access token for a specific session.
+   * @returns A promise that resolves to the access token string.
+   */
+  getAccessToken(sessionId?: string): Promise<string>;
 }
diff --git a/packages/nextjs/QUICKSTART.md b/packages/nextjs/QUICKSTART.md
@@ -72,7 +72,7 @@ Create a `.env` file in your project root and add the following environment vari
 **.env**
 
 ```bash
-NEXT_PUBLIC_ASGARDEO_BASE_URL="https://api.asgardeo.io/t/<your-org-name>"
+NEXT_PUBLIC_ASGARDEO_BASE_URL="https://api.asgardeo.io/t/<your-organization-name>"
 NEXT_PUBLIC_ASGARDEO_CLIENT_ID="<your-app-client-id>"
 ASGARDEO_CLIENT_SECRET="<your-app-client-secret>"
 ```

diff --git a/packages/nextjs/README.md b/packages/nextjs/README.md
@@ -28,7 +28,7 @@ yarn add @asgardeo/nextjs
 1. Create a `.env.local` file with your Asgardeo configuration:
 
 ```bash
-NEXT_PUBLIC_ASGARDEO_BASE_URL=https://api.asgardeo.io/t/<your-org-name>
+NEXT_PUBLIC_ASGARDEO_BASE_URL=https://api.asgardeo.io/t/<your-organization-name>
 NEXT_PUBLIC_ASGARDEO_CLIENT_ID=<your-client-id>
 NEXT_PUBLIC_ASGARDEO_CLIENT_SECRET=<your-client-secret>
 ```

diff --git a/packages/react/docs/OVERVIEW.md b/packages/react/docs/OVERVIEW.md
diff --git a/packages/react/docs/README.md b/packages/react/docs/README.md
@@ -0,0 +1,19 @@
+# @asgardeo/react - Overview
+
+The Asgardeo React SDK provides a comprehensive set of hooks, components, and utilities to integrate Asgardeo authentication into your React applications. Built on top of the `@asgardeo/browser` SDK, it offers a React-specific wrapper with pre-built components and React hooks for seamless authentication experiences.
+
+## Features
+
+- 🔐 **Complete Authentication Flow**: Sign-in, sign-up, and sign-out functionality
+- 🎨 **Pre-built Components**: Ready-to-use UI components for authentication
+- 🪝 **React Hooks**: Powerful hooks for authentication state management
+- 🌐 **Multi-language Support**: Built-in internationalization (i18n) support
+- 🎭 **Theming & Branding**: Customizable themes and branding options
+- 🏢 **Organization Management**: Support for organization-based authentication
+- 📱 **Social Login**: Built-in support for popular social providers
+- 🔒 **Type Safe**: Full TypeScript support for better developer experience
+- ⚡ **Performance Optimized**: Efficient re-rendering and state management
+
+## What's Next
+
+- [Quickstart Guide](./getting-started/overview.md): Get started with a simple integration.
diff --git a/packages/react/docs/components/OVERVIEW.md b/packages/react/docs/components/OVERVIEW.md
@@ -0,0 +1,59 @@
+# Components Overview
+
+The Asgardeo React SDK provides a comprehensive set of components to handle authentication, user management, and organization features in your React applications. The components are organized into different categories based on their functionality.
+
+## Root Components
+
+Root components are the entry points for integrating Asgardeo authentication into your React application. They provide the necessary context and configuration for the SDK.
+
+- [**`AsgardeoProvider`**](./asgardeo-provider.md) - The main provider component that wraps your application, providing authentication context and configuration.
+
+## Action Components
+
+Action components trigger specific authentication-related actions when users interact with them.
+
+### Sign-In Components
+
+- **`SignInButton`** - A customizable button that initiates the sign-in flow
+- **`SignUpButton`** - A button for user registration flows
+- **`SignOutButton`** - A button that handles user sign-out
+
+These components support both render props and traditional props patterns, giving you flexibility in how you implement them.
+
+## Control Components
+
+Control components manage the conditional rendering of content based on authentication state.
+
+- **`SignedIn`** - Renders children only when the user is authenticated
+- **`SignedOut`** - Renders children only when the user is not authenticated
+- **`Loading`** - Shows loading state during authentication operations
+
+## Presentation Components
+
+Presentation components display user and organization information with built-in styling and functionality.
+
+### User Components
+
+- **`User`** - Provides render props access to user data
+- **`UserProfile`** - Displays comprehensive user profile information
+- **`UserDropdown`** - A dropdown menu with user info and actions
+
+### Organization Components
+
+- **`Organization`** - Displays organization information
+- **`OrganizationProfile`** - Shows detailed organization profile
+- **`OrganizationSwitcher`** - Allows switching between organizations
+- **`OrganizationList`** - Lists available organizations
+- **`CreateOrganization`** - Form for creating new organizations
+
+### Authentication UI Components
+
+- **`SignIn`** - Complete sign-in form with multiple authentication options
+- **`SignUp`** - User registration form
+
+## Next Steps
+
+- [Explore Action Components](./actions/) - Learn about sign-in, sign-out, and sign-up buttons
+- [Learn Control Components](./control/) - Understand conditional rendering based on auth state
+- [Discover Presentation Components](./presentation/) - Explore user and organization display components
+- [Customize with Primitives](./primitives/) - Use low-level UI components for custom implementations
diff --git a/packages/react/docs/components/asgardeo-provider.md b/packages/react/docs/components/asgardeo-provider.md
@@ -0,0 +1,150 @@
+# AsgardeoProvider
+
+The `AsgardeoProvider` is the root context provider component that configures the Asgardeo React SDK and provides authentication context to your entire React application. It must wrap your application to enable authentication features.
+
+## Overview
+
+The `AsgardeoProvider` initializes the Asgardeo authentication client, manages authentication state, and provides context to child components through React Context. It handles token management, user sessions, organization switching, and branding preferences automatically.
+
+## Props
+
+All props are based on the `AsgardeoReactConfig` interface, which extends the base configuration from `@asgardeo/javascript`.
+
+### Required Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `baseUrl` | `string` | **REQUIRED** | The base URL of your Asgardeo organization. Format: `https://api.asgardeo.io/t/{org_name}` |
+| `clientId` | `string` | **REQUIRED** | The client ID obtained from your Asgardeo application registration |
+| `afterSignInUrl` | `string` | `window.location.origin` | URL to redirect users after successful sign-in. Must match configured redirect URIs in Asgardeo |
+| `afterSignOutUrl` | `string` | `window.location.origin` | URL to redirect users after sign-out. Must match configured post-logout redirect URIs |
+| `scopes` | `string \| string[]` | `openid profile internal_login` | OAuth scopes to request during authentication (e.g., `"openid profile email"` or `["openid", "profile", "email"]`) |
+| `organizationHandle` | `string` | - | Organization handle for organization-specific features like branding. Auto-derived from `baseUrl` if not provided. Required for custom domains |
+| `applicationId` | `string` | - | UUID of the Asgardeo application for application-specific branding and features |
+| `signInUrl` | `string` | - | Custom sign-in page URL. If provided, users will be redirected here instead of Asgardeo's default sign-in page |
+| `signUpUrl` | `string` | - | Custom sign-up page URL. If provided, users will be redirected here instead of Asgardeo's default sign-up page |
+| `clientSecret` | `string` | - | Client secret for confidential clients. Not recommended for browser applications |
+| `tokenValidation` | [TokenValidation](#tokenvalidation) | - | Token validation configuration for ID tokens including validation flags and clock tolerance |
+| `preferences` | [Preferences](#preferences) | - | Configuration object for theming, internationalization, and UI customization |
+
+<details>
+
+<summary><h4>TokenValidation</h4></summary>
+
+The `tokenValidation` prop allows you to configure how ID tokens are validated.
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `idToken` | `IdTokenValidation` | `{}` | Configuration for ID token validation |
+
+#### IdTokenValidation
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `validate` | `boolean` | `true` | Whether to validate the ID token |
+| `validateIssuer` | `boolean` | `true` | Whether to validate the issuer |
+| `clockTolerance` | `number` | `300` | Allowed clock skew in seconds |
+
+</details>
+
+<details>
+
+<summary><h4>Preferences</h4></summary>
+
+The `preferences` prop allows you to customize the UI components provided by the SDK.
+
+#### Theme Preferences (`preferences.theme`)
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `inheritFromBranding` | `boolean` | `true` | Whether to inherit theme from Asgardeo organization/application branding |
+| `mode` | `'light' \| 'dark' \| 'system'` | `'system'` | Theme mode. `'system'` follows user's OS preference |
+| `overrides` | `ThemeConfig` | `{}` | Custom theme overrides for colors, typography, spacing, etc. |
+
+#### Internationalization Preferences (`preferences.i18n`)
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `language` | `string` | Browser default | Language code for UI text (e.g., `'en-US'`, `'es-ES'`) |
+| `fallbackLanguage` | `string` | `'en-US'` | Fallback language when translations aren't available |
+| `bundles` | `object` | `{}` | Custom translation bundles to override default text |
+
+</details>
+
+## Usage
+
+### Basic Setup
+
+```tsx
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { AsgardeoProvider } from '@asgardeo/react';
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+
+root.render(
+  <AsgardeoProvider
+    baseUrl="https://api.asgardeo.io/t/your-org"
+    clientId="your-client-id"
+  >
+    <App />
+  </AsgardeoProvider>
+);
+```
+
+### Advanced Configuration
+
+```tsx
+import React from 'react';
+import { AsgardeoProvider } from '@asgardeo/react';
+import App from './App';
+
+function MyApp() {
+  return (
+    <AsgardeoProvider
+      baseUrl="https://api.asgardeo.io/t/your-org"
+      clientId="your-client-id"
+      afterSignInUrl="https://yourapp.com/dashboard"
+      afterSignOutUrl="https://yourapp.com/"
+      scopes={["openid", "profile", "email", "groups"]}
+      organizationHandle="your-org"
+      applicationId="app-uuid"
+      preferences={{
+        theme: {
+          mode: "dark",
+          inheritFromBranding: true,
+          overrides: {
+            primary: "#6366f1",
+            secondary: "#8b5cf6"
+          }
+        },
+        i18n: {
+          language: "en-US",
+          bundles: {
+            "en-US": {
+              "signIn.title": "Welcome Back",
+              "signUp.title": "Join Us"
+            }
+          }
+        }
+      }}
+    >
+      <App />
+    </AsgardeoProvider>
+  );
+}
+```
+
+### Environment Variables
+
+You can use environment variables for configuration:
+
+```tsx
+<AsgardeoProvider
+  baseUrl={process.env.REACT_APP_ASGARDEO_BASE_URL}
+  clientId={process.env.REACT_APP_ASGARDEO_CLIENT_ID}
+>
+  <App />
+</AsgardeoProvider>
+```