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.

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.


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)

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.

`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:

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' });
  };
  
  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:

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' })
  }

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

`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.

Here is an example:

<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' });
    },
  },
};
</script>

`switchTenant` with `frontegg/js`

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


// requires @frontegg/js@6.191 or later

function handleSwitchTenant(event) {
  app.switchTenant({ tenantId: 'new-tenant-id', callback: (isSuccess) => console.log(isSuccess) })
}

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.