Switching Between Active Tenants

This following guide explains how to switch the active tenant for a user who is subscribed to multiple tenants. This feature applies only to users who have been both added to and confirmed for more than one tenant.

Overview

Frontegg offers the ability to change a user's active tenant, when the user is subscribed to multiple tenants.

The active tenant is the tenant the user is logged into each time they log into your application. Once the user is logged into your application, you can allow them to switch their active tenant and, therefore, switch the tenant they are logged into.

One way to implement this is to allow a user to select their own active tenant. For instance, you can present to the user a list of the tenants they are subscribed to. Then, based on which tenant the user selects, call the switch tenant function with the tenant id from the user's selected tenant.

🚧

Prerequisites

Note that Frontegg supports this feature in React, Angular, and Vue. Regardless of which one you use, you will need access to the user object and the function that sets the active tenant.

Configuration

To implement this feature, you need the user object and the function that switches the active tenant.

You need the user object because it gives you a list of the tenants the user is subscribed to. The list of tenants is user.tenantIds.

You need the function that switches the active tenant in order to set one of user's tenants as the active tenant. That function is called switchTenant and requires one argument in the following format: switchTenant({tenantId: 'new-tenant-id'}).

👍

Good to know

• Instead of 'new-tenant-id', use the tenantId for the tenant that you want to become the active tenant 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.
• The SDK will use the user’s JWT (accessToken) behind the scenes. As long as the user is authenticated, and you have integrated with the SDK, you don't need to actively add the accessToken.

React

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;

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

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

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.

👍

Recommendation

We recommend calling the window.location.reload() method after the user's active tenant is switched.

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>