Create Users with custom claims

[Nikola-Milovic]

Hello everyone, I have the following flow that I cannot get to work properly

1. User creates an account on the website

2. A firebase account gets created

3. The UID from the firebase account gets sent to my server to create the actual account object

4. Server creates the object and sets custom claims

The issue is between steps 2 and 3, the /api/login is called, before the custom claims can be set in the server. I only allow admin accounts to access the website, meaning that the login has to be called after the claims are created, eg the claims have to be set prior, but that doesn't seem possible.

export const adminTokenChangeHandler = async (authUser: AuthUser) => {
    let response;
    // If the user is authed, call login to set a cookie.
    if (authUser.id) {
        const userToken = await authUser.getIdToken();
        response = await fetch("/api/auth/login", {
            method: "POST",
            headers: {
                Authorization: userToken!,
            },
            credentials: "include",
        });
        if (!response.ok) {
            const responseJSON = await response.json();
            if (response.status === 403) {
                await signOut(getAuth());
                throw new Error(`Not an admin account`);
            } else {
                throw new Error(
                    `Received ${
                        response.status
                    } response from login API endpoint: ${JSON.stringify(
                        responseJSON,
                    )}`,
                );
            }
        }
    } else {
        // If the user is not authed, call logout to unset the cookie.
        response = await fetch("/api/auth/logout", {
            method: "POST",
            credentials: "include",
        });
        if (!response.ok) {
            const responseJSON = await response.json();
            throw new Error(
                `Received ${
                    response.status
                } response from logout API endpoint: ${JSON.stringify(
                    responseJSON,
                )}`,
            );
        }
    }
    return response;
};

And my API route

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    try {
        const { AuthUser: user, idToken } = await setAuthCookies(req, res);
        //TODO
        // if (!user.claims["admin"]) {
        //     await unsetAuthCookies(req, res);
        //     return res
        //         .status(403)
        //         .json({ error: "This user isn't an admin." });
        // }
    } catch (e) {
        console.log(e);
        return res.status(500).json({ error: "Unexpected error." });
    }
    return res.status(200).json({ success: true });
};

export default handler;

[kmjennison]

Thanks for the detailed question.

Have you set your custom token changed handler in the config property? If so, you have control over when the client calls the login API endpoint. You could wait for some other event to complete first, like the claims getting set, or retry when the login fails.

When custom claims change, they won't immediately appear in the ID token. You have to force a token refresh with getIdToken(true) (see Firebase docs). So, after your server sets the custom claims, have your client force-refresh the token, log in, and it should work.