User is signed in but request.auth is null

[sirkrisp]

[REQUIRED] Describe your environment

• Operating System version: MacOs Ventura 13.0
• Browser version: Chrome Version 109.0.5414.87
• Firebase SDK version: 9.14.0
• Firebase Product: firestore, auth, emulator

[REQUIRED] Describe the problem

When using the emulator (with custom port), request.auth is null (in firestore rules) even though user is signed in. Downgrading to 9.6.10 solved my issue (I haven't tried other version).

Maybe it is worth noting that in my application the user is signed in with a custom firebase token.

[MarkDuckworth]

Thanks for reporting. Is this something you can reproduce on versions 9.9.4 or 9.8.0?

[sirkrisp]

works with both versions. I also tested 9.16.0 - doesn't work

[MarkDuckworth]

Thanks for investigating that. I'll see if we can get a repro. If you have any code that can help us repro, that would also be useful. Thanks!

[sirkrisp]

Hi @MarkDuckworth, currently I'm quite busy but in 3 weeks things should look better, then I can create a repo for reproduction. However, I guess I can already share these code snippets with you:

// server.js
import * as admin from "firebase-admin";
import cors from "cors";
import express from "express";
import {
    Request as JwtRequest
} from "express-jwt"

if (admin.apps.length === 0) {
    admin.initializeApp();
}
const app = express();
app.use(cors());
app.get(
    "/firebase/token",
    // discunaJwtCheck,
    // jwtAuthz(["openid"], {customScopeKey: "scp", customUserKey: "auth"}),
    async (req: JwtRequest, res, next) => {
        // if (!req.auth) return next("Unauthenticated")
        // const {sub: uid} = req.auth;
        const uid = "my-test-user-id"
        if (!uid) throw Error("uid not found")
        try {
            const firebaseToken = await admin.auth().createCustomToken(uid);
            res.json({firebaseToken});
        } catch (err) {
            res.status(500).send({
                message: "Something went wrong acquiring a Firebase token.",
                error: err
            });
        }
    });
export const discunaApi = functions.https.onRequest(app)


// withAuth.tsx
import {Outlet} from "react-router-dom";
import {useAuth} from "react-oidc-context";
import {useEffect} from "react";
import {useSelector} from "react-redux";
import {RootState} from "../../store";

export function WithAuth(props: { protectedComponent?: JSX.Element, appId: string }) {

    // TODO check that userId == userIdHint, o/w redirect and get new token

    // firebase auth
    const auth = useSelector((state: RootState) => state.auth)

    // oidc auth
    // TODO you can get rid of oauth
    const oauth = useAuth();

    useEffect(() => {
        if (auth.hasLoaded && !auth.isSignedIn && !oauth.isLoading) {
            // save current url
            window.localStorage.setItem("auth/targetURL", window.location.href)

            // redirect
            // this updates oauth state => needs to be called inside useEffect
            oauth.signinRedirect({
                extraQueryParams: {
                    audience: props.appId
                }
            })
        }
    }, [auth, oauth, props.appId])

    if (auth.hasLoaded && auth.isSignedIn) {
        return props.protectedComponent ?? <Outlet/>
    }

    if (oauth.error) {
        return <div>Oops... {oauth.error.message}</div>;
    }

    return null
}

// oAuthCallback.tsx

import {useNavigate} from "react-router-dom";
import {useCallback, useEffect} from "react";
import {useAuth} from "react-oidc-context";
import {signInWithCustomToken} from "firebase/auth";
import {API_ENDPOINT} from "../appEnv";
import {firebaseAuth} from "../../firebase/firebase";


export function OAuthCallback() {
    const navigate = useNavigate()

    const oauth = useAuth();

    const redirect = useCallback(() => {
        const targetURL = window.localStorage.getItem("auth/targetURL")
        let targetRelativePath = "/"
        if (targetURL) {
            try {
                const targetURLObj = new URL(targetURL)
                targetRelativePath = targetURLObj.pathname + targetURLObj.search
            } catch (e) {
                console.error("target URL is invalid")
            }
        }
        window.localStorage.removeItem("auth/targetURL")
        navigate(targetRelativePath)
    }, [navigate])

    const firebaseSignIn = useCallback(async (token: string) => {

        // exchange token for firebase token
        const firebaseTokenResponse = await fetch(`${API_ENDPOINT}/firebase/token`, {
            headers: {
                'Authorization': `Bearer ${token}`,
            }
        })
        // TODO only convert to json when status ok
        const firebaseTokenResponseJSON = await firebaseTokenResponse.json();
        const firebaseToken = firebaseTokenResponseJSON.firebaseToken

        // Use the Firebase custom token to authenticate with Firebase.
        // https://firebase.google.com/docs/auth/web/custom-auth
        const firebaseUser = (await signInWithCustomToken(firebaseAuth, firebaseToken)).user
    }, [])

    useEffect(() => {
        if(firebaseAuth.currentUser) {
            redirect()
        } else if (!oauth.isLoading) {
            if(oauth.isAuthenticated && oauth.user) {
                const token = oauth.user.access_token
                firebaseSignIn(token).then(redirect)
            } else {
                // try again
                // redirect()
            }
        }
    }, [firebaseSignIn, oauth, redirect])
    return null
}

// useAuth.ts
export function useAuth() {
    const dispatch = useDispatch()
    useEffect(() => {
        // check if user has upgraded
        const cancel = firebaseAuth.onIdTokenChanged(async (user) => {
            if(user) {
                dispatch(signIn({
                    uid: user.uid,
                    providerId: user.providerId,
                }))
            } else {
                dispatch(signOut());
            }
        })
        return () => {
            cancel()
        }
    }, [dispatch]);
}

// authSlice.ts
import {createSlice, PayloadAction} from "@reduxjs/toolkit";

interface AuthSignedOut {
    isSignedIn: false,
}

interface AuthSignedIn {
    isSignedIn: true,
    uid: string,
}

export type Auth = {hasLoaded: boolean} & (AuthSignedOut | AuthSignedIn)

const authSlice = createSlice({
    name: 'auth',
    initialState: {
        hasLoaded: false,
        isSignedIn: false
    } as Auth,
    reducers: {
        signIn(state, action: PayloadAction<{
            uid: string,
            providerId: string
        }>) {
            state.hasLoaded = true
            state.isSignedIn = true
            if(state.isSignedIn) {
                state.uid = action.payload.uid
            }
        },
        signOut(state) {
            state.hasLoaded = true
            state.isSignedIn = false
        }
    }
})

export const {
    signIn,
    signOut,
} = authSlice.actions

export const authReducer = authSlice.reducer

// store.ts

// TODO adjust imports
import {AnyAction, combineReducers, configureStore} from '@reduxjs/toolkit'
import {authReducer} from "./slices/authSlice";

const SIGNOUT_REQUEST = "SIGNOUT_REQUEST"

const combinedReducer = combineReducers({

    // auth
    auth: authReducer,
})

// https://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store/35641992#35641992
const rootReducer = (state: any, action: AnyAction) => {
    if (action.type === SIGNOUT_REQUEST) {
        // for all keys defined in your persistConfig(s)
        // for redux persist
        // storage.removeItem('persist:root')
        // storage.removeItem('persist:otherKey')
        return combinedReducer(undefined, action);
    }
    return combinedReducer(state, action);
};

export const store = configureStore({
    reducer: rootReducer,
    // middleware: [
    //     save()
    // ],
    // preloadedState: load()
})

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof combinedReducer>

// firebase.ts

import { initializeApp } from "firebase/app";
import { getAuth, connectAuthEmulator } from "firebase/auth";
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
import { getStorage, connectStorageEmulator } from "firebase/storage";
import { getFunctions, connectFunctionsEmulator } from "firebase/functions";

const firebaseConfig = {};

// initialize Firebase apps
export const firebaseApp = initializeApp(firebaseConfig);

// get Firebase apps
// HELP instead of exporting firebasAuth here, can I call getAuth() in every function where I need it? Or is this the best way to do it? (I don't want to call connectAuthEmulator whenever I call getAuth())
export const firebaseAuth = getAuth();
export const firestoreDb = getFirestore();
export const storage = getStorage();
export const functions = getFunctions(firebaseApp, "europe-west3")

// check if dev mode
if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
    connectAuthEmulator(firebaseAuth, "http://127.0.0.1:29099", { disableWarnings: true });
    connectFirestoreEmulator(firestoreDb, '127.0.0.1', 28080);
    connectStorageEmulator(storage, "127.0.0.1", 29199);
    connectFunctionsEmulator(functions, "127.0.0.1", 25001);
}

[belcrod5]

@sirkrisp

Hi! I had the same problem but was able to solve it.
This is a version upgrade of firebase-tools. The versions that have been successfully confirmed are:

• firebase-tool: 11.24.1
• firebase: 9.18.0 (client)
  There seems to be a problem with the emulator because the version of firebase-tools is old.
  https://www.npmjs.com/package/firebase-tools
  Consider it!

[james-dellow]

I'm seeing this issue while using the emulator with a custom token. I tried downgrading to JS SDK version 9.18 as suggested above, but it made no difference. However, I'm using the latest version of firebase tools (11.25.3).

These aren't my final rules, but I'm testing with:
rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read: if request.auth != null; allow write: if false; } } }

When I try to write, it correctly rejects with PERMISSION_DENIED but for read, it just tells me false for get. If I open up the rules, then I can read/write without any issues.

I can also get a token back with firebase.auth().currentUser.getIdToken(). And the REST API works with this token.

[MarkDuckworth]

I made a pretty simple app that uses custom auth and tested it against the emulator. I was unable to reproduce the issue on the latest firebase tools and Firebase Web SDK. I tried to use config from @sirkrisp's code, but mostly followed steps here: https://firebase.google.com/docs/auth/admin/create-custom-tokens#node.js

Looks like this:

async function main() {
    const firebaseApp = initializeApp(firebaseConfig);
    const firebaseAuth = getAuth();
    const firestoreDb = getFirestore();

    connectAuthEmulator(firebaseAuth, "http://127.0.0.1:9099", { disableWarnings: true });
    connectFirestoreEmulator(firestoreDb, '127.0.0.1', 8080);

    // TODO add your custom token below
    signInWithCustomToken(firebaseAuth, "<your token here>")
        .then(async (userCredential) => {
            await addDoc(collection(firestoreDb, "foo"), {"foo": true});

            const result = await getDocs(collection(firestoreDb, "foo"));
            console.log(result.docs.length)
            console.log(result.docs[0].data())
        })
        .catch((error) => {
            console.log(error)
        });

}
main();

@sirkrisp, @james-dellow, if you have a simple repro, please let me know so we can investigate further.

[google-oss-bot]

Hey @sirkrisp. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[james-dellow]

I've tried different versions of the javascript SDK (9.18 through to the current 9.20) and it makes no difference - it still rejects PERMISSION_DENIED using the request.auth != null rule.

Code snippet:

firebase.auth().signInWithCustomToken(token)
    .then((userCredential) => {
        const db = firebase.firestore();
        db.collection("foos").doc().set({
            foo: "bar",
            uid: userCredential.user.uid,
        })
            .then(() => {
                console.log("Document successfully written!");
            })
            .catch((error) => {
                console.error("Error writing document: ", error);
            });
    });

Looking at the emulator console, request.auth is always null. But the user's UID is retrieved (and passed in my code). I also can't see an obvious authorisation token in the request in the network tab?

Using the REST API direct is still working and the auth is passed to the emulator.

The environment is Windows 11 and:

• firebase-tools@11.28.0
• firebase-functions@4.3.1
• firebase-admin@11.7.0