### Start Development Server (Bash) Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/samples/asgardeo-html-js-app/README.md This command starts the development server for the sample application, typically opening it at https://localhost:3000. It assumes the http-server package is installed. ```bash npm start ``` -------------------------------- ### Install Dependencies (Bash) Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/samples/asgardeo-html-js-app/README.md This command installs the necessary dependencies for the sample application using npm, specifically the http-server package for serving static files. ```bash npm install ``` -------------------------------- ### Install Asgardeo Auth SPA SDK Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Installs the Asgardeo Auth SPA SDK using npm. This is the recommended way to include the library in your project for managing dependencies. ```bash npm install --save @asgardeo/auth-spa ``` -------------------------------- ### Install Dependencies (Yarn) Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Installs the necessary dependencies for the Asgardeo Auth SPA SDK monorepository. This command should be run at the root of the project. ```shell yarn build ``` -------------------------------- ### Initialize Asgardeo Auth SPA SDK Client Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/samples/asgardeo-java-webapp/README.md Initializes the Asgardeo authentication client with configuration details such as sign-in redirect URL, client ID, base URL, and response mode. This JavaScript code is intended to be placed within a ` ``` -------------------------------- ### Build React Application for Production Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/samples/asgardeo-react-js-app/README.md This command builds the React application for production using npm. It optimizes the build for performance, minifies the code, and includes hashes in filenames for cache busting. The output is placed in the 'build' folder, ready for deployment. ```Bash npm run build ``` -------------------------------- ### Initialize Asgardeo Auth Client - TypeScript Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Initializes the Asgardeo authentication client with the provided configuration. ```TypeScript auth.initialize(config); ``` -------------------------------- ### Configure Sign-In Behavior Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Provides options to control the sign-in flow. `callOnlyOnRedirect` ensures execution post-redirect, `fidp` allows direct IdP redirection, and `forceInit` re-fetches OIDC endpoints. Custom key-value pairs can be appended to the authorization URL. ```javascript { callOnlyOnRedirect: false, // or true fidp: "", // IdP identifier forceInit: false, // or true key: "value" // custom parameter } ``` -------------------------------- ### Configure Auth SPA SDK (Javascript) Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/samples/asgardeo-html-js-app/README.md This snippet shows how to configure the Asgardeo Auth SPA SDK by defining the clientID, signInRedirectURL, and baseUrl in the authConfig object within the index.html file. ```javascript const authConfig = { // ClientID generated for the application clientID: "", // After login callback URL - We have to use the app root as this is a SPA // (Add it in application OIDC settings "Callback Url") signInRedirectURL: origin, // Asgardeo URL baseUrl: "", }; ``` -------------------------------- ### AuthClientConfig Interface Configuration Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Defines the configuration options for the AuthClientConfig interface, extending the base SDK configuration. It specifies attributes for storage, resource server URLs, request timeouts, and session management intervals. ```typescript interface AuthClientConfig extends AuthClientConfig { storage?: "sessionStorage" | "webWorker" | "localStorage"; resourceServerURLs?: string[]; requestTimeout?: number; sessionRefreshInterval?: number; checkSessionInterval?: number; enableOIDCSessionManagement?: boolean; } ``` -------------------------------- ### Configure Asgardeo Auth SDK in React Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/samples/asgardeo-react-js-app/README.md This JSON configuration file is used to set up the Asgardeo Auth JS SDK within the React application. It requires the client ID of the registered application, the base URL of the authentication server, and the sign-in redirect URL. ```JSON { "clientID": "", "baseUrl": "", "signInRedirectURL": "https://localhost:3000" } ``` -------------------------------- ### AuthClientConfig Interface Definition Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Defines the structure for client configuration in the Asgardeo Auth SPA SDK. It includes parameters for redirect URLs, client identification, security features like PKCE, and endpoint configurations for OpenID Connect flows. ```typescript interface AuthClientConfig { signInRedirectURL: string; signOutRedirectURL?: string; clientHost?: string; clientID: string; clientSecret?: string; enablePKCE?: boolean; prompt?: string; responseMode?: ResponseMode; scope?: string[]; baseUrl: string; overrideWellEndpointConfig?: boolean; endpoints?: OIDCEndpoints; wellKnownEndpoint?: string; } ``` -------------------------------- ### Sign In User with Asgardeo Auth SPA SDK Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Initiates the user sign-in process by generating an authorization URL and redirecting the user to the Asgardeo SSO page. It requires a second call upon redirection to complete the token request. This method can be configured with optional sign-in parameters. ```TypeScript auth.signIn(); ``` -------------------------------- ### Enable HTTP Handler Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Enables the HTTP handler for the SDK. This method is asynchronous and returns a Promise that resolves with a boolean value indicating the success of enabling the handler. ```TypeScript auth.enableHttpHandler(): Promise ``` -------------------------------- ### Import Polyfilled ESM Module Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Demonstrates how to import the polyfilled ESM (ECMAScript Module) version of the Asgardeo Auth SPA SDK client. This is suitable for modern modular JavaScript applications that support ESM. ```typescript import { AsgardeoSPAClient } from "@asgardeo/auth-spa/polyfilled/esm"; ``` -------------------------------- ### Update Configuration - TypeScript Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Updates the configurations for the AsgardeoAuthClient. Accepts a partial configuration object with optional attributes. ```TypeScript auth.updateConfig({ signOutRedirectURL: "http://localhost:3000/sign-out" }); ``` -------------------------------- ### Define Basic User Information Attributes Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Defines the structure for basic user information retrieved from the authentication process. Includes attributes like email, username, display name, scopes, tenant domain, session state, and the unique user identifier (sub). ```javascript { email: "string", username: "string", displayName: "string", allowedScopes: "string", tenantDomain: "string", sessionState: "string", sub: "string" } ``` -------------------------------- ### Import Polyfilled UMD Module Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Illustrates how to import the polyfilled UMD (Universal Module Definition) version of the Asgardeo Auth SPA SDK client. UMD is compatible with both CommonJS and AMD module systems, as well as global variable assignments. ```typescript import { AsgardeoSPAClient } from "@asgardeo/auth-spa/polyfilled/umd"; ``` -------------------------------- ### Configure Single Logout Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Explains how to enable and configure single logout capabilities within the Asgardeo Auth SPA SDK. This involves setting specific configuration flags during client initialization and ensuring the sign-in method is called correctly on redirect. ```TypeScript auth.signIn({callOnlyOnRedirect: true}); ``` -------------------------------- ### Configure Custom Grant Request Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Defines the configuration for making custom grant requests. It includes parameters for request identification, data payload, sign-in requirements, token attachment, session return, and an optional token endpoint. ```javascript /** * Configuration for custom grant requests. */ interface CustomGrantConfig { /** * Unique identifier for the custom grant request. */ id: string; /** * Data to be sent in the custom grant request body. Supports template tags for session information. */ data: any; /** * Specifies if the user must be signed in to dispatch this request. */ signInRequired: boolean; /** * Specifies if the access token should be attached to the request header. */ attachToken: boolean; /** * Specifies if the request returns session information, such as the access token. */ returnsSession: boolean; /** * Optional token endpoint to use instead of the default. */ tokenEndpoint?: string | null; } ``` -------------------------------- ### Embed Polyfilled Script in HTML Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md This snippet shows how to embed the polyfilled Asgardeo Auth SPA SDK script directly into an HTML page. This is useful for ensuring compatibility with older browsers like Internet Explorer. ```html ``` -------------------------------- ### HTTP Request Configuration with Token Attachment Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Extends AxiosRequestConfig to include a flag for attaching the access token to the request header. ```javascript /** * Extends AxiosRequestConfig to specify token attachment. */ interface HTTPRequestConfig extends AxiosRequestConfig { /** * Specifies whether the access token should be attached to the request header. */ attachToken: boolean; } ``` -------------------------------- ### Send Multiple HTTP Requests Concurrently (TypeScript) Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md The `httpRequestAll` method allows sending multiple HTTP requests simultaneously, similar to `axios.all()`. It accepts an array of `HttpRequestConfig` objects and returns a Promise that resolves with an array of responses in the same order as the input configurations. ```TypeScript auth.httpRequestAll(configs).then((responses) => { response.forEach((response) => { // console.log(response); }); }).catch((error) => { // console.error(error); }); ``` -------------------------------- ### Configure ID Token Validation and Clock Tolerance Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Allows configuration of JWT ID token validation and clock tolerance. `validateIDToken` enables or disables validation, while `clockTolerance` sets the leeway for validation in seconds. ```javascript { validateIDToken: true, // or false clockTolerance: 60 // in seconds } ``` -------------------------------- ### Register Event Hook Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Allows developers to register callback functions for various authentication events. The 'on' method takes a hook name and a callback function. An optional ID is required for 'custom-grant' hooks. This enables custom logic execution during different stages of the authentication flow. ```TypeScript auth.on("sign-in", () => { // console.log(response); }); ``` -------------------------------- ### Request Custom Grant (TypeScript) Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md The `requestCustomGrant` method facilitates custom grant flows provided by Identity Providers. It accepts a `CustomGrantConfig` object, allowing developers to specify parameters like `client_id`, `grant_type`, and `scope`. This method can return either the raw response or basic user information. ```TypeScript const config = { attachToken: false, data: { client_id: "{{clientID}}", grant_type: "account_switch", scope: "{{scope}}", token: "{{token}}", }, id: "account-switch", returnResponse: true, returnsSession: true, signInRequired: true } auth.requestCustomGrant(config).then((response)=>{ console.log(response); }).catch((error)=>{ console.error(error); }); ``` -------------------------------- ### Check for Auth Search Params in URL - TypeScript Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md A utility function to determine if 'code' and 'session_state' are present as search parameters in the URL. ```TypeScript const hasParams: boolean = SPAUtils.hasAuthSearchParamsInURL(); ``` -------------------------------- ### Specify OIDC Endpoint URIs Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Defines the necessary URIs for OpenID Connect (OIDC) communication. Includes endpoints for authorization, token exchange, user information, JWKS, registration, revocation, introspection, session checking, and end-session, along with the issuer identifier. ```javascript { authorizationEndpoint: "/oauth2/authorize", tokenEndpoint: "/oauth2/token", userinfoEndpoint: "", jwksUri: "/oauth2/jwks", registrationEndpoint: "", revocationEndpoint: "/oauth2/revoke", introspectionEndpoint: "", checkSessionIframe: "/oidc/checksession", endSessionEndpoint: "/oidc/logout", issuer: "" } ``` -------------------------------- ### Attempt Silent Sign-In with Asgardeo Auth SPA SDK Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Attempts to sign a user in silently without browser redirects by using an iFrame to check for an active session. If successful, it dispatches a token request and returns user information. This method is dependent on the browser not blocking third-party cookies. ```TypeScript auth.trySignInSilently().then((response) => { if (response) { // The user is signed in. // handle basic user info } // The user is not signed in. }); ``` -------------------------------- ### Enable HTTP Handler - TypeScript Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Enables the callback functions attached to the HTTP client. This should be called if the disableHttpHandler method was previously invoked. ```TypeScript auth.enableHttpHandler(); ``` -------------------------------- ### Decode ID Token Payload Structure Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Represents the structure of a decoded ID token payload, containing essential user and token information. ```javascript /** * Structure of a decoded ID token payload. */ interface DecodedIDTokenPayload { /** * The audience of the token. */ aud: string | string[]; /** * The subject of the token, typically the username. */ sub: string; /** * The issuer of the token. */ iss: string; /** * The email address associated with the user. */ email?: string; /** * The preferred username of the user. */ preferred_username?: string; /** * The tenant domain the user belongs to. */ tenant_domain?: string; } ``` -------------------------------- ### Refresh Access Token Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Refreshes the user's access token and updates the session information. This method is asynchronous and returns a Promise that resolves with basic user information upon successful refresh. It's important to note that this is not needed when using the 'webWorker' storage type. ```TypeScript auth.refreshAccessToken().then((response)=>{ // console.log(response); }).catch((error)=>{ // console.error(error); }); ``` -------------------------------- ### Sign Out Error Structure Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Defines the structure for error objects returned during the sign-out process. ```javascript /** * Structure for sign-out error objects. */ interface SignOutError { /** * The error message. */ error: string; /** * A more detailed description of the error. */ error_description: string; } ``` -------------------------------- ### Revoke Access Token and Clear Session Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Revokes the current access token and clears all session information from the storage. It utilizes the `end-user-session` hook for post-session revocation callbacks. ```typescript auth.revokeAccessToken(); ``` -------------------------------- ### Sign Out User with Asgardeo Auth SPA SDK Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Ends the user's session with Asgardeo and logs them out. It's recommended to register a sign-out hook to clear locally stored session data when the user is redirected back to the signOutRedirectURL. ```TypeScript auth.signOut(); ``` ```TypeScript // Register a sign-out hook with any callback function when signOutRedirectURL is loaded // to clear locally stored user session auth.on("sign-out", () => {}); ``` -------------------------------- ### Send Authenticated HTTP Request (TypeScript) Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md The `httpRequest` method sends authenticated HTTP requests to Asgardeo endpoints. It automatically attaches the access token to the request headers. This method is essential for interacting with protected resources and is the only way to send requests when using the `webWorker` storage type. ```TypeScript const auth = AsgardeoSPAClient.getInstance(); const requestConfig = { headers: { "Accept": "application/json", "Content-Type": "application/scim+json" }, method: "GET", url: "https://api.asgardeo.io/scim2/me" }; return auth.httpRequest(requestConfig) .then((response) => { // console.log(response); }) .catch((error) => { // console.error(error); }); ``` -------------------------------- ### Check Authentication Status Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Checks if the user is currently authenticated. This method returns a boolean value, true if the user is authenticated, and false otherwise. It's a simple synchronous check. ```TypeScript const isAuth = auth.isAuthenticated(); ``` -------------------------------- ### Disable HTTP Handler - TypeScript Source: https://github.com/asgardeo/asgardeo-auth-spa-sdk/blob/main/README.md Disables the callback functions attached to the HTTP client. Returns a Promise that resolves with a boolean indicating success. ```TypeScript auth.disableHttpHandler(); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.