## Frontegg's built-in account (tenant) related methods

This guide explains how to switch the active tenant for users who belong to multiple tenants. This feature applies only to users who have been added and confirmed for more than one tenant.

The active tenant is the one the user is logged into when using your application. After logging in, users can switch their active tenant. To implement this, you can display a list of available tenants for the user to select from, then call the switch tenant function based on their choice.

br
Note!
Note that Frontegg supports this functionality is supported in all Frontegg's client-side SDKs and mobile SDKs. The implementation for mobile, can be found under each mobile guide.

### Configuration

To implement this functionality, you'll need to use the tenants object which can be imported in each SDK as `loadTenants`. The user object that is used in this example holds only the list of tenantIds under `user.tenantIds`.

br

```javascript

import { useTenantsActions, useAuth } from "@frontegg/react";

const { loadTenants } = useTenantsActions(); 
// const { tenantsState } = useAuth(); Also can be used to access the array of tenants that the user is member in


const displayTenants = () => {
    loadTenants()
  }

<button onClick={displayTenants}>Show Tenants</button>

console.log(tenantsState)
```


```javascript
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { FronteggAppService, FronteggAuthService, ContextHolder } from '@frontegg/angular';
import { ITeamUserRole } from '@frontegg/rest-api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, OnDestroy {
  isLoading = true;
  loadingSubscription: Subscription;
  user?: any;
  selectedTenantId: string = '';
  tenantState?: any;

  constructor(
    private fronteggAuthService: FronteggAuthService,
    private fronteggAppService: FronteggAppService
  ) {
    this.loadingSubscription = this.fronteggAppService.isLoading$.subscribe(
      (isLoading) => (this.isLoading = isLoading)
    );
  }

  ngOnInit(): void {
    this.fronteggAuthService.teamState$.subscribe((teamState) => {
      const newRoles: ITeamUserRole[] = teamState.roles.filter((role: ITeamUserRole) => role.name !== 'New');
      this.fronteggAuthService.setTeamState({ roles: newRoles });
    });
  
    this.fronteggAuthService.user$.subscribe((user) => {
      this.user = user;
      this.updateSelectedTenantId();
    });
  
    this.fronteggAuthService.loadTenants();
    this.fronteggAuthService.tenantsState$.subscribe((tenants) => {
      this.tenantState = tenants;
      console.log('Tenant State Loaded:', this.tenantState);
      this.updateSelectedTenantId();
    });
  }

  private updateSelectedTenantId() {
    // Ensure both user and tenantState are loaded
    if (this.user && this.tenantState) {
      const activeTenant = this.tenantState.tenants.find((tenant: any) => tenant.tenantId === this.user.tenantId);
      if (activeTenant) {
        this.selectedTenantId = activeTenant.tenantId;
      }
    }
  }

  switchTenant(): void {
    console.log('Switching to Tenant ID:', this.selectedTenantId);  // Log the tenant ID on switch
    this.fronteggAuthService.switchTenant({ tenantId: this.selectedTenantId });
  }

  ngOnDestroy(): void {
    this.loadingSubscription.unsubscribe();
  }
}
```


```javascript
import { mapLoginActions } from "@frontegg/vue";

export default {
  name: "App",
  updated() {
    this.loginIfNeeded();
  },
  methods: {
    loadTenants: mapLoginActions('loadTenants'),
  },
  data() {
    return {
      ...this.mapAuthState(),
      currentPath: window.location.hash,
    };
  },
};
```

br
Good to know
- Instead of `new-tenant-id`, use the tenantId that you wish to be the active for the user. Note that the `tenantId` that you set as the active tenant needs to be a tenant that the user actually belongs to.
- After the switch, all SDKs will perform a refresh in order to update the user's state and get a new JWT.


br
The `silentReload` flag prevents a full page reload after switching tenants, providing a smoother user experience without interrupting the session. This feature is available in the versions listed below.

Prerequisites
@frontegg/react@7.6.4
@frontegg/angular@7.13.2
@frontegg/vue@4.6.1
@frontegg/nextjs@9.2.2
@frontegg/js@7.61.0

br
#### `switchTenant` with `frontegg/react` OR `frontegg/nextjs`

To access the `user` object and the `switchTenant` function, import `useAuth` and `useAuthActions` from `@frontegg/react`.

Use the `useAuth` hook to get the `user` object and the `useAuthActions` hook to access the `switchTenant` function.

Here is an example:

br

```javascript
import { useAuth, useAuthActions } from "@frontegg/react";

function App() {
  const { switchTenant } = useAuthActions();
  const { user } = useAuth();

  // Use user.tenantIds to get the tenants the user is a member of
  const handleSwitchTenant = () => { 
      switchTenant({ tenantId: 'new-tenant-id' });
      
      // Optionally, add silentReload flag to prevent a full page reload
      // switchTenant({ tenantId: 'new-tenant-id', silentReload: true });
  };
  
  return <button onClick={handleSwitchTenant}>Select Active Tenant</button>;
}

export default App;
```

#### `switchTenant` with `frontegg/angular`

After adding the `fronteggAuthService` into your application, this service will give you the `user` object and the `switchTenant` function.

Here is an example:


```typescript
import {Component, OnDestroy, OnInit} from '@angular/core';
import {FronteggAppService, FronteggAuthService} from "@frontegg/angular";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
  isLoading = true;
  loadingSubscription: Subscription;
  user?: any;

  constructor(private fronteggAuthService: FronteggAuthService, private fronteggAppService: FronteggAppService) {
    this.loadingSubscription = fronteggAppService.isLoading$.subscribe((isLoading) => this.isLoading = isLoading)
  }

  ngOnInit(): void {
    this.fronteggAuthService?.user$.subscribe((user) => {
      this.user = user
    })
  }

	switchTenant(): void {
    // Use this.user.tenantIds to get the tenants the user is a member of
    this.fronteggAuthService.switchTenant({ tenantId: 'new-tenant-id' })
    // Optionally, add silentReload flag to prevent a full page reload
    // this.fronteggAuthService.switchTenant({ tenantId: 'new-tenant-id', silentReload: true })
  }




  ngOnDestroy(): void {
    this.loadingSubscription.unsubscribe()
  }
}
```


```html
<frontegg-app>
    <div *ngIf="authenticated">
      <img src="{{ user?.profilePictureUrl }}" alt="{{ user?.name }}" />
      <div>User name: {{ user?.name }}</div>
      <div><button (click)="showApp()">Admin Panel</button></div>
      <div><button (click)="switchTenant()">Switch Tenant</button></div>
    </div>
    <router-outlet></router-outlet>
  </frontegg-app>
```

#### `switchTenant` with `frontegg/vue`

Use `authState` to access the `user` object and the `switchTenant` function. Because it is required as part of the generic frontegg/vue.js setup, you already have access to `authState` from the `mapAuthState` method.

br
Here is an example:

br

```html
<template>
  <div id="app" v-if="fronteggLoaded">
    <img alt="My logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js with Frontegg App" />
    <p>
      Logged in as
      {{ this.authState.user ? this.authState.user.email : "Not logged in" }}
    </p>
    <button v-on:click="switchTenant">Switch Tenant</button>
  </div>
</template>

<script>

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      ...this.mapAuthState(),
    };
  },
  methods: {
		switchTenant() {
      // Use this.authState.user.tenantIds to get the tenants the user is a member of
      this.fronteggAuth.tenantsActions.switchTenant({ tenantId: 'new-tenant-id' });
      // Optionally, add silentReload flag to prevent a full page reload
      // this.fronteggAuth.tenantsActions.switchTenant({ tenantId: 'new-tenant-id', silentReload: true });
    },
  },
};
</script>
```

#### `switchTenant` with `frontegg/js`

Use `state.auth.user` to access the `user` object and `app` for the `switchTenant` function.



```javascript

// requires @frontegg/js@6.191 or later

function handleSwitchTenant(event) {
  app.switchTenant({ tenantId: 'new-tenant-id', callback: (isSuccess) => console.log(isSuccess) })
  // Optionally, add silentReload flag to prevent a full page reload
  // app.switchTenant({ tenantId: 'new-tenant-id', silentReload: true, callback: (isSuccess) => console.log(isSuccess) })
}
```

br
Note!
We recommend calling the `window.location.reload()` inside the `switchTenant` callback after the user's active tenant is switched. This will help refreshing the application state after switching tenants.