How to implement User Switching

2 min readJan 24, 2023

Account user switching is a common feature in applications where multiple users have access to the same account (ex. streaming services). In this blog post, we will explore how to implement account user switching in a React application.

One way to implement account user switching is to use React’s context API. The context API allows you to share data across components without having to pass props through multiple levels of components. We can create a context for the current user and use it to store the user’s information and a method for switching to a different user.

First, we will create a UserContext file and define our context using the createContext method:

import { createContext } from 'react';

const UserContext = createContext({
    user: null,
    switchUser: () => {}
});

export default UserContext;

This creates a context object with a user property, which will hold the current user's information, and a switchUser method, which we will use to switch to a different user.

Next, we will create a UserProvider component that will provide the UserContext to its children. This component will also handle the logic for switching to a different user:

import React, { useState } from 'react';
import UserContext from './UserContext';

function UserProvider({ children }) {
    const [user, setUser] = useState(null);

    const switchUser = (newUser) => {
        setUser(newUser);
    }

    return (
        <UserContext.Provider value={{ user, switchUser }}>
            {children}
        </UserContext.Provider>
    );
}

export default UserProvider;

In this component, we are using the useState hook to manage the current user's information. The switchUser method takes in a new user object and updates the user state. The UserProvider component wraps its children in a UserContext.Provider component, which makes the user and switchUser functions available to its children.

Finally, we can use the UserContext in any component that needs access to the current user's information or the ability to switch users. Here's an example of how to use the context in a component:

import React, { useContext } from 'react';
import UserContext from './UserContext';

function UserInfo() {
    const { user } = useContext(UserContext);

    return (
        <div>
            <h1>Welcome, {user.name}</h1>
            <button onClick={() => switchUser({ name: 'John Doe' })}>Switch User</button>
        </div>
    );
}

export default UserInfo;

This component uses the useContext hook to access the user and switchUser functions from the UserContext. It then displays the current user's name and a button to switch to a different user.

In order to use the UserProvider and UserContext, we should wrap the entire app in UserProvider component, this will make sure that all the children have access to the UserContext.

How to implement User Switching

Written by Liv Nelson