### Run React Development Server (Bash)

Source: https://github.com/asgardeo/javascript/blob/main/packages/react/QUICKSTART.md

Commands to start the React development server using npm, pnpm, or yarn.

```bash
# Using npm
npm run dev

# Using pnpm
pnpm dev

# Using yarn
yarn dev
```

--------------------------------

### Install Asgardeo React SDK (Bash)

Source: https://github.com/asgardeo/javascript/blob/main/packages/react/QUICKSTART.md

Commands to install the Asgardeo React SDK using npm, pnpm, or yarn.

```bash
# Using npm
npm install @asgardeo/react

# Using pnpm
pnpm add @asgardeo/react

# Using yarn
yarn add @asgardeo/react
```

--------------------------------

### Create React App with Vite (Bash)

Source: https://github.com/asgardeo/javascript/blob/main/packages/react/QUICKSTART.md

Commands to create a new React application using Vite with npm, pnpm, or yarn.

```bash
# Using npm
npm create vite@latest react-sample --template react

# Using pnpm
pnpm create vite@latest react-sample --template react

# Using yarn
yarn create vite react-sample --template react
```

--------------------------------

### Display User Information with User and UserProfile (TypeScript)

Source: https://github.com/asgardeo/javascript/blob/main/packages/react/QUICKSTART.md

Demonstrates how to display user information using the `User` component for custom rendering and the `UserProfile` component for a default display. Includes sign-in/sign-out buttons.

```tsx
import { SignedIn, SignedOut, SignInButton, SignOutButton, User, UserProfile } from '@asgardeo/react'
import './App.css'

function App() {
  return (
    <>
      <SignedIn>
        <User>
          {({ user }) => (
            <div>
              <h1>Welcome, {user.username}</h1>
            </div>
          )}
        </User>
        <UserProfile />
        <SignOutButton />
      </SignedIn>
      <SignedOut>
        <SignInButton />
      </SignedOut>
    </>
  )
}

export default App
```

--------------------------------

### Install @asgardeo/nextjs SDK using npm, pnpm, or yarn

Source: https://github.com/asgardeo/javascript/blob/main/packages/nextjs/QUICKSTART.md

This snippet shows how to install the Asgardeo Next.js SDK into your project using npm, pnpm, or yarn. This SDK is essential for integrating Asgardeo authentication.

```bash
# Using npm
npm install @asgardeo/nextjs

# Using pnpm
pnpm add @asgardeo/nextjs

# Using yarn
yarn add @asgardeo/nextjs
```

--------------------------------

### Create Next.js Application using npm, pnpm, or yarn

Source: https://github.com/asgardeo/javascript/blob/main/packages/nextjs/QUICKSTART.md

This snippet demonstrates how to create a new Next.js application using different package managers like npm, pnpm, or yarn. It initializes a new project and navigates into the project directory.

```bash
# Using npm
npm create next-app@latest next-sample -- --yes
cd next-sample

# Using pnpm
pnpm create next-app@latest next-sample -- --yes
cd next-sample

# Using yarn
yarn create next-app next-sample -- --yes
cd next-sample
```

--------------------------------

### Setup Asgardeo Authentication Middleware in Next.js

Source: https://github.com/asgardeo/javascript/blob/main/packages/nextjs/QUICKSTART.md

This TypeScript snippet demonstrates how to set up the authentication middleware for Asgardeo in a Next.js application. It initializes the `AsgardeoNext` class with environment variables and defines the middleware function to handle authentication requests.

```typescript
import { AsgardeoNext } from '@asgardeo/nextjs';
import { NextRequest } from 'next/server';

const asgardeo = new AsgardeoNext();

asgardeo.initialize({
  baseUrl: process.env.NEXT_PUBLIC_ASGARDEO_BASE_URL,
  clientId: process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_ID,
  clientSecret: process.env.ASGARDEO_CLIENT_SECRET,
});

export async function middleware(request: NextRequest) {
  return await asgardeo.middleware(request);
}

export const config = {
  matcher: [
    '/((?!_next|[^?]*\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
};
```

--------------------------------

### Implement Sign-in/Sign-out Buttons (TypeScript)

Source: https://github.com/asgardeo/javascript/blob/main/packages/react/QUICKSTART.md

Adds `SignedIn`, `SignedOut`, `SignInButton`, and `SignOutButton` components to conditionally render sign-in or sign-out options based on the user's authentication status.

```tsx
import { SignedIn, SignedOut, SignInButton, SignOutButton } from '@asgardeo/react'
import './App.css'

function App() {
  return (
    <>
      <SignedIn>
        <SignOutButton />
      </SignedIn>
      <SignedOut>
        <SignInButton />
      </SignedOut>
    </>
  )
}

export default App
```

--------------------------------

### Install @asgardeo/browser SDK

Source: https://github.com/asgardeo/javascript/blob/main/packages/browser/README.md

Instructions for installing the @asgardeo/browser SDK using npm, pnpm, or yarn.

```bash
# Using npm
npm install @asgardeo/browser

# or using pnpm
pnpm add @asgardeo/browser

# or using yarn
yarn add @asgardeo/browser
```

--------------------------------

### Install Dependencies for Sample App (Bash)

Source: https://github.com/asgardeo/javascript/blob/main/CONTRIBUTING.md

This snippet shows how to navigate to an existing sample application, install its dependencies using pnpm, and confirms that local i18n package changes will be automatically utilized.

```bash
cd samples/teamspace-react
pnpm install
```

--------------------------------

### Configure Environment Variables for Asgardeo Integration

Source: https://github.com/asgardeo/javascript/blob/main/packages/nextjs/QUICKSTART.md

This snippet illustrates how to set up environment variables in a `.env` file for integrating with Asgardeo. It includes placeholders for the Asgardeo base URL, client ID, and client secret, which should be replaced with actual values from your Asgardeo application.

```bash
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>"
```

--------------------------------

### Configure AsgardeoProvider in Next.js Layout

Source: https://github.com/asgardeo/javascript/blob/main/packages/nextjs/QUICKSTART.md

This JSX snippet shows how to wrap your Next.js application with the `AsgardeoProvider` in the main layout file (`app/layout.tsx`). This provider is necessary to enable Asgardeo authentication features throughout your application.

```tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import {AsgardeoProvider} from '@asgardeo/nextjs';
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>)
{
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <AsgardeoProvider>{children}</AsgardeoProvider>
      </body>
    </html>
  );
}
```

--------------------------------

### Configure Embedded Login Page in middleware.ts (TypeScript)

Source: https://github.com/asgardeo/javascript/blob/main/packages/nextjs/QUICKSTART.md

Modifies the middleware.ts file to configure the path for an embedded sign-in page. This involves initializing AsgardeoNext with a signInUrl and returning the middleware.

```typescript
import {
  AsgardeoNext
} from '@asgardeo/nextjs';
import { NextRequest } from 'next/server';

const asgardeo = new AsgardeoNext();

asgardeo.initialize({
  baseUrl: process.env.NEXT_PUBLIC_ASGARDEO_BASE_URL,
  clientId: process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_ID,
  clientSecret: process.env.ASGARDEO_CLIENT_SECRET,
  signInUrl: '/signin',
});

export async function middleware(request: NextRequest) {
  return await asgardeo.middleware(request);
}

export const config = {
  matcher: [
    '/((?!_next|[^?]*\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
};
```

--------------------------------

### Example Changeset Summary and Usage

Source: https://github.com/asgardeo/javascript/blob/main/CONTRIBUTING.md

Demonstrates an example of a changeset summary file, specifying package updates and their types. It also includes a JavaScript code snippet showing how to use the `SignInWithPopup` method from the `@asgardeo/react` package for authentication.

```yaml
---
'@asgardeo/javascript': patch
'@asgardeo/react': patch
'@asgardeo/i18n': patch
---

Update the react package to add a new `SignInWithPopup` method for popup-based authentication flows.

- This method allows users to sign in without redirecting, improving user experience.
- Ensure to handle popup blockers and errors gracefully.

```

```javascript
import { SignInWithPopup } from '@asgardeo/react';

function App() {
    const handleSignIn = () => {
        SignInWithPopup()
            .then((user) => {
                console.log('User signed in:', user);
            })
            .catch((error) => {
                console.error('Error signing in:', error);
            });
    };

    return (
        <div>
            <h1>Welcome to My App</h1>
            <button onClick={handleSignIn}>Sign In with Popup</button>
        </div>
    );
}

```

--------------------------------

### E2E Test Examples

Source: https://github.com/asgardeo/javascript/blob/main/e2e/README.md

Demonstrates various ways to run the e2e tests using different combinations of IDP and mode flags. Includes examples for default tests, specific IDP/mode combinations, running all tests in headed mode, and testing both modes for a single IDP.

```bash
# IS redirect tests (default)
pnpm e2e

# Thunder embedded tests
pnpm e2e -- --idp thunder --mode embedded

# All tests, all IDPs, headed
pnpm e2e -- --idp all --mode all --headed

# IS both modes
pnpm e2e -- --idp is --mode all
```

--------------------------------

### Install Project Dependencies with pnpm

Source: https://github.com/asgardeo/javascript/blob/main/CONTRIBUTING.md

This command installs all the necessary project dependencies using the pnpm package manager. Ensure you have pnpm version 9 or higher installed.

```bash
pnpm install
```

--------------------------------

### Display User Information in Next.js with Asgardeo SDK

Source: https://github.com/asgardeo/javascript/blob/main/packages/nextjs/QUICKSTART.md

This JSX snippet shows how to display user information and provide sign-in/sign-out functionality in a Next.js application using the `@asgardeo/nextjs` SDK. It utilizes the `User` component to access user data and `UserProfile` for a pre-built profile display, alongside `SignInButton` and `SignOutButton`.

```tsx
import { SignedIn, SignedOut, SignInButton, SignOutButton, User, UserProfile } from '@asgardeo/nextjs';

export default function Home() {
  return (
    <>
      <SignedIn>
        <User>
          {({ user }) => (
            <div>
              <h1>Welcome, {user.username}</h1>
            </div>
          )}
        </User>
        <UserProfile />
        <SignOutButton />
      </SignedIn>
      <SignedOut>
        <SignInButton />
      </SignedOut>
    </>
  );
}
```

--------------------------------

### Implement Sign-in and Sign-out Buttons in Next.js

Source: https://github.com/asgardeo/javascript/blob/main/packages/nextjs/QUICKSTART.md

This JSX snippet demonstrates how to add sign-in and sign-out buttons to your Next.js application using components provided by the `@asgardeo/nextjs` SDK. It conditionally renders the buttons based on the user's authentication status using `SignedOut` and `SignedIn` components.

```tsx
import {SignInButton, SignedIn, SignOutButton, SignedOut} from '@asgardeo/nextjs';

export default function Home() {
  return (
    <>
      <SignedOut>
        <SignInButton />
      </SignedOut>
      <SignedIn>
        <SignOutButton />
      </SignedIn>
    </>
  );
}
```

--------------------------------

### Configure AsgardeoProvider in React (TypeScript)

Source: https://github.com/asgardeo/javascript/blob/main/packages/react/QUICKSTART.md

Wraps the main App component with AsgardeoProvider, providing necessary authentication configuration like baseUrl and clientId. Ensure to replace placeholders with your actual Asgardeo application credentials.

```tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { AsgardeoProvider } from '@asgardeo/react'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <AsgardeoProvider
      baseUrl="<your-organization-base-url>"
      clientId="<your-app-client-id>"
    >
      <App />
    </AsgardeoProvider>
  </StrictMode>
)
```

--------------------------------

### Docker Commands for IDP Containers

Source: https://github.com/asgardeo/javascript/blob/main/e2e/README.md

Provides commands to manage Docker containers for the Identity Providers (IDPs). Includes starting all containers, stopping and removing them, and starting specific IDP containers (WSO2 IS or Thunder).

```bash
pnpm e2e:docker:up          # Start all IDP containers
pnpm e2e:docker:down        # Stop and remove all containers + volumes
pnpm e2e:docker:up:is       # Start only WSO2 IS
pnpm e2e:docker:up:thunder  # Start only Thunder
```

--------------------------------

### Install Asgardeo Express.js SDK (npm, pnpm, yarn)

Source: https://github.com/asgardeo/javascript/blob/main/packages/express/README.md

Instructions for installing the Asgardeo Express.js SDK using different package managers. This SDK is used to integrate Asgardeo authentication with Express.js applications.

```bash
# Using npm
npm install @asgardeo/express

# or using pnpm
pnpm add @asgardeo/express

# or using yarn
yarn add @asgardeo/express
```

--------------------------------

### Integrate React-Specific ESLint Plugins (TypeScript)

Source: https://github.com/asgardeo/javascript/blob/main/samples/teamspace-react/README.md

This code demonstrates how to integrate `eslint-plugin-react-x` and `eslint-plugin-react-dom` into your ESLint configuration for React-specific linting rules. Ensure these plugins are installed as development dependencies.

```javascript
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})
```

--------------------------------

### Create Embedded Sign-In Page Component (React/TypeScript)

Source: https://github.com/asgardeo/javascript/blob/main/packages/nextjs/QUICKSTART.md

Creates a new page component (app/signin/page.tsx) using React and TypeScript to render the embedded sign-in page. It imports and uses the SignIn component from '@asgardeo/nextjs'.

```tsx
'use client';

import {SignIn} from '@asgardeo/nextjs';

export default function SignInPage() {
  return <SignIn />;
}
```

--------------------------------

### Example Commit Messages for Asgardeo JavaScript

Source: https://github.com/asgardeo/javascript/blob/main/CONTRIBUTING.md

Provides concrete examples of commit messages following the defined structure. These examples demonstrate how to specify the type and scope for different kinds of changes, such as chore, feat, and ci.

```markdown
# Update issue templates to include '@asgardeo/i18n' and improve version description
chore: update issue templates to include '@asgardeo/i18n' and improve version description

# Add a new feature to the react package.
feat(react): add `SignInWithPopup` method to facilitate popup-based authentication flows.

# Update GitHub Actions workflows to include linting and testing steps.
ci: enhance GitHub Actions workflows with linting and testing steps
```

--------------------------------

### Install Playwright Browsers and Run E2E Tests

Source: https://github.com/asgardeo/javascript/blob/main/e2e/README.md

Installs necessary Playwright browsers and executes end-to-end tests. Requires Docker for IDP containers and pnpm for package management. The tests can be configured to run against specific IDPs and sign-in modes.

```bash
pnpm e2e:install
pnpm e2e:docker:up
pnpm e2e -- --idp is
```

--------------------------------

### Expand ESLint Configuration with Type-Aware Rules (TypeScript)

Source: https://github.com/asgardeo/javascript/blob/main/samples/teamspace-react/README.md

This snippet shows how to extend the ESLint configuration to include type-aware lint rules for TypeScript projects. It requires installing `@typescript-eslint/eslint-plugin` and configuring `parserOptions.project` to point to your `tsconfig.json` files.

```javascript
export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

--------------------------------

### Install Vue SDK for Asgardeo

Source: https://context7.com/asgardeo/javascript/llms.txt

Installs the Vue SDK for Vue.js applications, offering plugin-based authentication. Installation can be done using npm, pnpm, or yarn.

```bash
npm install @asgardeo/vue
# or
pnpm add @asgardeo/vue
# or
yarn add @asgardeo/vue
```

--------------------------------

### Next.js Package Usage Example with Asgardeo Logger

Source: https://github.com/asgardeo/javascript/blob/main/docs/developer/LOGGER.md

Provides a practical example of integrating the Asgardeo logger within a Next.js application, specifically within a service class. It demonstrates using `createPackageComponentLogger` to log actions during user sign-in, including success and error scenarios with contextual data.

```typescript
import { createPackageComponentLogger } from '@asgardeo/javascript';

const authLogger = createPackageComponentLogger('@asgardeo/nextjs', 'Authentication');
const sessionLogger = createPackageComponentLogger('@asgardeo/nextjs', 'SessionManager');

export class NextAuthService {
  async signIn(credentials: Credentials): Promise<User> {
    authLogger.info('Starting Next.js sign-in process', { username: credentials.username });
    
    try {
      sessionLogger.debug('Creating session cookie');
      const user = await this.performSignIn(credentials);
      authLogger.info('Next.js sign-in successful', { userId: user.id });
      return user;
    } catch (error) {
      authLogger.error('Next.js sign-in failed', { error: error.message, username: credentials.username });
      throw error;
    }
  }
}
```

--------------------------------

### Install Next.js SDK for Asgardeo

Source: https://context7.com/asgardeo/javascript/llms.txt

Installs the Next.js SDK for full-stack Next.js applications, providing server-side authentication support. Compatible with npm, pnpm, and yarn.

```bash
npm install @asgardeo/nextjs
# or
pnpm add @asgardeo/nextjs
# or
yarn add @asgardeo/nextjs
```

--------------------------------

### Install React SDK for Asgardeo

Source: https://context7.com/asgardeo/javascript/llms.txt

Installs the React SDK for client-side React applications, enabling pre-built authentication components and hooks. Supports npm, pnpm, and yarn package managers.

```bash
npm install @asgardeo/react
# or
pnpm add @asgardeo/react
# or
yarn add @asgardeo/react
```

--------------------------------

### TypeScript: Launch Development Server Script

Source: https://github.com/asgardeo/javascript/blob/main/e2e/README.md

The `launch-dev-server.ts` script is responsible for setting up the environment before starting the Vite development server. It writes the `.env` file, configuring `VITE_ASGARDEO_SIGN_IN_URL` for embedded mode or omitting it for redirect mode.

```typescript
// e2e/setup/launch-dev-server.ts
// ... script logic to write .env file ...
```

--------------------------------

### Key Derivation and Setup

Source: https://github.com/asgardeo/javascript/blob/main/e2e/playwright-report-embedded/index.html

Asynchronously derives cryptographic keys (encryption, authentication) from a password using PBKDF2. It also sets up the AES counter (CTR) and HMAC instances for subsequent operations.

```javascript
async function K8(l,u,c,f){const r=await th(l,u,c,Xe(f,0,Ci[u])),o=Xe(f,Ci[u]);if(r[0]!=o[0]||r[1]!=o[1])throw new Error(rr)}
```

```javascript
async function k8(l,u,c){const f=W2(new Uint8Array(Ci[u])),r=await th(l,u,c,f);return hr(f,r)}
```

```javascript
async function th(l,u,c,f){l.password=null;const r=await J8(U8,c,Y8,!1,L8),o=await F8(Object.assign({salt:f},\_f),r,8*(bi[u]*2+2)),h=new Uint8Array(o),v=wi(Pe,Xe(h,0,bi[u])),y=wi(Pe,Xe(h,bi[u],bi[u]*2)),A=Xe(h,bi[u]*2);return Object.assign(l,{keys:{key:v,authentication:y,passwordVerification:A},ctr:new V8(new X8(v),Array.from(G8)),hmac:new Z8(y)}),A}
```

--------------------------------

### Asgardeo Server Action for User Data in Next.js

Source: https://context7.com/asgardeo/javascript/llms.txt

This example shows how to use Asgardeo within Next.js server actions to perform server-side operations. It demonstrates fetching user data and access tokens using the `asgardeo` client instance.

```tsx
// app/api/user/route.ts
import { asgardeo } from '@asgardeo/nextjs/server';

export async function GET() {
  try {
    const client = asgardeo;
    const user = await client.getUser();
    const accessToken = await client.getAccessToken();

    return Response.json({ user });
  } catch (error) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 });
  }
}

```

--------------------------------

### Build the Asgardeo JavaScript Project

Source: https://github.com/asgardeo/javascript/blob/main/CONTRIBUTING.md

This command builds the entire Asgardeo JavaScript project. It compiles the source code and prepares it for development or testing. This command requires Node.js (v18 or higher) and pnpm (v9 or higher) to be installed.

```bash
pnpm build
```

--------------------------------

### Run Changeset Command

Source: https://github.com/asgardeo/javascript/blob/main/CONTRIBUTING.md

Executes the `pnpm changeset` command from the project root to initiate the versioning and changelog generation process. This command guides the user through selecting affected packages and defining the type of change (patch, minor, major).

```bash
pnpm changeset
```

--------------------------------

### Commit Message Structure Example

Source: https://github.com/asgardeo/javascript/blob/main/CONTRIBUTING.md

Illustrates the standard format for commit messages, including type, scope, a short summary, and optional body and footer sections. This structure helps in automatically generating changelogs.

```markdown
<type>(<scope>): <short summary>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
```

--------------------------------

### Configure Environment Variables for Asgardeo Integration

Source: https://github.com/asgardeo/javascript/blob/main/samples/react-tanstack-router/README.md

Provides instructions on setting up environment variables for Asgardeo integration. It involves copying an example `.env.local` file and adding the `VITE_ASGARDEO_BASE_URL` and `VITE_ASGARDEO_CLIENT_ID` with your organization's specific details. These variables are crucial for the `AsgardeoProvider` to connect to your Asgardeo tenant.

```bash
cp .env.local.example .env.local

VITE_ASGARDEO_BASE_URL='https://api.asgardeo.io/t/<your_organization_name>'
VITE_ASGARDEO_CLIENT_ID='<your_client_id>'
```

--------------------------------

### Set up TanStack Router with Asgardeo Integration

Source: https://github.com/asgardeo/javascript/blob/main/samples/react-tanstack-router/README.md

Illustrates the setup of TanStack Router using its imperative API. It defines a root route and an index route, then combines them into a route tree. This structure is essential for managing navigation within the application, especially when integrating with authentication providers.

```tsx
import {createRouter, createRootRoute, createRoute} from '@tanstack/react-router';

const rootRoute = createRootRoute();
const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: Home,
});

const routeTree = rootRoute.addChildren([indexRoute, dashboardRoute]);
const router = createRouter({routeTree});
```

--------------------------------

### Initialize and Use AsgardeoAuthClient in JavaScript

Source: https://github.com/asgardeo/javascript/blob/main/packages/browser/README.md

Demonstrates how to initialize the AsgardeoAuthClient, sign in, retrieve user information, and sign out within a browser environment using JavaScript. This requires the @asgardeo/browser package.

```javascript
import { AsgardeoAuthClient } from "@asgardeo/browser";

// Initialize the auth client
const authClient = new AsgardeoAuthClient({
    afterSignInUrl: "https://localhost:3000",
    clientId: "<your_client_id>",
    baseUrl: "https://api.asgardeo.io/t/<org_name>"
});

// Sign in
authClient.signIn();

// Get user info after authentication
const userInfo = await authClient.getUser();

// Sign out
authClient.signOut();
```

--------------------------------

### Configure Asgardeo Provider for React Application

Source: https://github.com/asgardeo/javascript/blob/main/samples/react-tanstack-router/README.md

Shows how to wrap the main application component with `AsgardeoProvider` in `main.tsx`. This provider initializes the Asgardeo authentication client with necessary configuration such as `baseUrl`, `clientId`, `signInUrl`, `signUpUrl`, and `scopes`. It enables seamless integration of Asgardeo's authentication services throughout the application.

```tsx
<AsgardeoProvider
  baseUrl={import.meta.env.VITE_ASGARDEO_BASE_URL}
  clientId={import.meta.env.VITE_ASGARDEO_CLIENT_ID}
  signInUrl="/signin"
  signUpUrl="/signup"
  scopes="openid profile email"
>
  <RouterProvider router={router} />
</AsgardeoProvider>
```

--------------------------------

### Using npm Symlinks for Local Testing (Bash)

Source: https://github.com/asgardeo/javascript/blob/main/CONTRIBUTING.md

Provides bash commands to set up local testing of the i18n package using npm symlinks. This involves creating a global symlink for the local package and then linking it to a test application.

```bash
# Navigate to the i18n package
cd packages/i18n

# Create a global symlink
npm link

# Navigate to your test application
cd /path/to/your/test-app

# Link the local i18n package
npm link @asgardeo/i18n
```

--------------------------------

### Implement Protected Routes with TanStack Router and Asgardeo

Source: https://github.com/asgardeo/javascript/blob/main/samples/react-tanstack-router/README.md

Demonstrates how to protect a route using the `ProtectedRoute` component from `@asgardeo/tanstack-router`. If a user is not authenticated, they will be redirected to the specified `redirectTo` path. This ensures that sensitive pages are only accessible to logged-in users.

```tsx
import {ProtectedRoute} from '@asgardeo/tanstack-router';
import Dashboard from './pages/Dashboard';

const dashboardRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/dashboard',
  component: () => (
    <ProtectedRoute redirectTo="/">
      <Dashboard />
    </ProtectedRoute>
  ),
});
```

--------------------------------

### Error Code Examples without Package Prefix (TypeScript)

Source: https://github.com/asgardeo/javascript/blob/main/ERROR_CODES.md

Illustrates error codes for an internal utility function 'getUserInfo' without a package prefix. Shows examples of validation and response errors with their respective sequential numbers.

```typescript
// getUserInfo Function (internal utility)
'getUserInfo-ValidationError-001'  // Invalid URL
'getUserInfo-ValidationError-002'  // Missing access token
'getUserInfo-ResponseError-100'    // HTTP error response
'getUserInfo-ResponseError-101'    // Invalid response format
```

--------------------------------

### Basic Logging with Asgardeo JavaScript Logger

Source: https://github.com/asgardeo/javascript/blob/main/docs/developer/LOGGER.md

Demonstrates the fundamental usage of the Asgardeo logger, including basic logging calls (info, warn, error, debug) and how to configure the log level for different environments. It shows how to import the logger and LogLevel enum.

```typescript
import logger, { LogLevel } from '@asgardeo/javascript';

// Basic logging with package-specific prefix
logger.info('Application started');
// Output: 🛡️ Asgardeo - @asgardeo/javascript [INFO] Application started

logger.warn('This is a warning');
logger.error('Something went wrong');
logger.debug('Debug information'); // Only shown if level is DEBUG

// Configure log level
logger.setLevel(LogLevel.DEBUG);
logger.debug('Now debug messages will show');

// Set to production level
logger.setLevel(LogLevel.WARN); // Only WARN and ERROR will show
```

--------------------------------

### Error Code Examples with Package Prefix (TypeScript)

Source: https://github.com/asgardeo/javascript/blob/main/ERROR_CODES.md

Demonstrates error codes for the 'executeEmbeddedSignUpFlow' function using the 'javascript-' package prefix. Includes examples for validation errors, response errors, and their sequential numbering within categories.

```typescript
// executeEmbeddedSignUpFlow Function (JavaScript package)
'javascript-executeEmbeddedSignUpFlow-ValidationError-001'  // Missing payload
'javascript-executeEmbeddedSignUpFlow-ValidationError-002'  // Invalid flowType
'javascript-executeEmbeddedSignUpFlow-ResponseError-100'    // HTTP error response
```

--------------------------------

### Get Current CRC Byte

Source: https://github.com/asgardeo/javascript/blob/main/e2e/playwright-report-embedded/index.html

Retrieves the current byte from the CRC state. This is used in the XOR transformation.

```javascript
function ah(l){const u=l.keys[2]|2;return lh(Math.imul(u,u^1)>>>8)}
```

--------------------------------

### Custom Logger Configuration with Asgardeo JavaScript

Source: https://github.com/asgardeo/javascript/blob/main/docs/developer/LOGGER.md

Demonstrates how to create a fully customized logger instance using `createLogger`. This allows developers to define specific log levels, prefixes, timestamp inclusion, and visibility of log levels to tailor the logging output precisely to their application's needs.

```typescript
import { createLogger, LogLevel } from '@asgardeo/javascript';

const customLogger = createLogger({
  level: LogLevel.DEBUG,
  prefix: '🛡️ Asgardeo - MyCustomApp',
  timestamps: true,
  showLevel: true,
});

customLogger.info('Custom configured message');
// Output: [2025-01-10T10:30:45.123Z] 🛡️ Asgardeo - MyCustomApp [INFO] Custom configured message
```

--------------------------------

### Display Test Timeline

Source: https://github.com/asgardeo/javascript/blob/main/e2e/playwright-report-embedded/index.html

This component visualizes the test execution timeline, showing start times and durations for each test.

```JavaScript
function ny({report:l}){const u=l.json().machines;if(u.length===0)return null;const c=u.map(f=>{const r=f.tag.join(" "),o=new Date(f.startTime).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:"short"});let h=`${r} started at ${o}, runs ${rm(f.duration)}`;return f.shardIndex&&(h+=` (shard ${f.shardIndex})`),{label:r,tooltip:h,startTime:f.startTime,duration:f.duration,shardIndex:f.shardIndex??1}}).sort((f,r)=>f.label.localeCompare(r.label)||f.shardIndex-r.shardIndex);return m.jsx(ke,{header:"Timeline",children:m.jsx($v,{entries:c})})
```

--------------------------------

### Get Lower 8 Bits

Source: https://github.com/asgardeo/javascript/blob/main/e2e/playwright-report-embedded/index.html

Extracts the lower 8 bits of a number. This is a utility function for bit manipulation.

```javascript
function lh(l){return l&255}
```

--------------------------------

### Array Slicing

Source: https://github.com/asgardeo/javascript/blob/main/e2e/playwright-report-embedded/index.html

Creates a new Uint8Array that is a view of a portion of the original array. This is an efficient way to get a sub-array without copying data.

```javascript
function Xe(l,u,c){return l.subarray(u,c)}
```