Javascript Reactfire-验证用户在使用AuthCheck时是否具有角色

我使用AuthCheck组件来验证用户是否登录，但我还需要检查角色

代码是

const App = () => {
    const classes = useStyles();
    const clientParam = { uri: process.env.REACT_APP_GRAPHQL_ENDPOINT };
    const client = new ApolloClient(clientParam);
    return (
        <div className={classes.root}>
            <ApolloProvider client={client}>
                <CssBaseline />
                <Router>
                    <Header />
                    <Switch>
                        <Route path="/b/:id" exact>
                            <AuthCheck fallback={<Login />}>
                                <MainContainer />
                            </AuthCheck>
                        </Route>
                    </Switch>
                </Router>
            </ApolloProvider>
        </div>
    );
};

但这不起作用，因为用户在第一次呼叫解决后立即登录，然后在我检查角色时注销。我怎样才能重写它来回报一个承诺

const auth = useAuth();
const firestore = useFirestore();

const handleSubmit = async (event) => {
    event.preventDefault();
    setError('');
    try {
        const result = await auth.signInWithEmailAndPassword(username, password);

        const userData = (
            await firestore.collection('users').doc(result.user.uid).get()
        ).data();
        if (userData.userRole !== 'live_battle_admin') {
            await auth.signOut();
            throw new Error('You need to be a Live Battle Admin to sign in');
        }
    } catch (err) {
        setError(err.message);
    }
};