Ignite MST root store set up after app renders

[azizsaad]

Hey 👋

I am developing a mobile app with firebase email/password authentication, and followed the firebase docs to get it working.

export const app = initializeApp(firebaseConfig);;
export const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(AsyncStorage),
});

Here is an auth listener in the MST:

export const AuthenticationStoreModel = types

  .model("AuthenticationStore")
  .props({
    user: types.optional(types.frozen(), null),
  })
  .actions(withSetPropAction)
  .actions((self) => ({
    setAuthenticated: flow(function* (user: User) {
    ...
          self.user = user
    ...
    }),
  }))
  .actions((self) => ({
    updateAuthState: flow(function* updateAuthState() {
      const unsubscribe = onAuthStateChanged(auth, async (user) => {
        self.setAuthenticated(user)
      })
      // Don't forget to unsubscribe when the component unmounts
      return () => unsubscribe()
    }),
  }))
  .actions((self) => ({
    // This is a lifecycle method that gets called after the model is created.
    // It's a good place to do any setup. Especially if you're listening to events.
    // In our case, we're listening to the auth state of a user.
    afterCreate() {
      self.updateAuthState()
    },
  }))

But when I go to a page which makes an API request, then reload the app on Expo Go, the API request fails. The request needs the user object for authentication (using user.getIdToken()), and the user object is fetched from the store with useStores hook.

I attempted to see if the entire app is built (therefore the API request is made) before the RootStore is rehydrated in app.tsx by console logging stuff in the request and in the MST model above, and the API request logs first, implying that this is true.

When I retry the request in the app, it worked perfectly fine.

Is this an issue with how MST is initiated and rehydrated? Am I missing something?

[jamonholmgren]

I'm not sure if this is actually your issue, but when you're returning the unsubscribe, it's expecting to be in a useEffect.

    updateAuthState: flow(function* updateAuthState() {
      const unsubscribe = onAuthStateChanged(auth, async (user) => {
        self.setAuthenticated(user)
      })
      // Don't forget to unsubscribe when the component unmounts
      return () => unsubscribe()
    }),

This would work more like this:

function App(): JSX.Element {
  // by returning the unsubscribe here, it'll be properly called on unmount
  useEffect(() => rootStore.authentication.updateAuthState(), [])

  return (
    <SafeAreaView style={backgroundStyle}>
       // ...
    </SafeAreaView>
  )
}

Instead, if you want it to unsubscribe inside the MST model itself, you'd want to use the beforeDestroy hook.

export const AuthenticationStoreModel = types
  .model("AuthenticationStore")
  .props({
    user: types.optional(types.frozen(), null),
  })
  .actions(withSetPropAction)
  .actions((self) => ({
    setAuthenticated: flow(function* (user: User) {
    ...
          self.user = user
    ...
    }),
  }))
  .actions((self) => ({
    updateAuthState: flow(function* updateAuthState() {
      // typescript may not like this, but it'll work
      self.unsubscribe = onAuthStateChanged(auth, async (user) => {
        self.setAuthenticated(user)
      })
      // Don't forget to unsubscribe when the component unmounts
      return () => unsubscribe()
    }),
  }))
  .actions((self) => ({
    // This is a lifecycle method that gets called after the model is created.
    // It's a good place to do any setup. Especially if you're listening to events.
    // In our case, we're listening to the auth state of a user.
    afterCreate() {
      self.updateAuthState()
    },
    beforeDestroy() {
      // typescript may not like this, but it'll work
      self?.unsubscribe()
    }
  }))

This may not be your actual issue, but it's like a real issue.

Moving on toward your actual problem, I think I'd need more information about how the page is using the token and what error you're seeing.

[azizsaad]

Thank you very much for your response! It makes sense as to why I'd need beforeDestroy. The issue is still persisting - here's the extra information:

1. I made an app with login functionality using firebase auth - so when the user puts in their email and password, it logs in like so:

import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth"

export async function signInWithEmailAndPass(
  email: string,
  password: string,
): Promise<void | Error> {
  try {
    const result = await signInWithEmailAndPassword(auth, email, password)

2. Logging in works fine - once successful, the user is redirected to the home page using this standard logic in navigation:

{authenticationStore.isSignedIn ? <HomeScreen/>  :  <LoginScreen/>

The authenticationStore looks like this:

export const AuthenticationStoreModel = types
  .model("AuthenticationStore")
  .props({
    user: types.optional(types.frozen(), null),
    isSignedIn: types.optional(types.boolean, false),
    userEmail: types.optional(types.string, ""),
    userUid: types.optional(types.union(types.string, types.null), ""),
    isLoading: types.optional(types.boolean, false),
  })
  .actions(withSetPropAction)
  .actions((self) => ({
    setAuthenticated: flow(function* (user: User) {
      if (user) {
        self.isLoading = true
        try {
          self.user = user
          self.userEmail = user.providerData[0].email
          self.userUid = user.uid
          self.isSignedIn = true
        } catch (error) {
          console.log(error)
        }
      } else {
        self.isSignedIn = false
        self.user = null
      }
      self.isLoading = false
    }),
  }))
  .actions((self) => ({
    updateAuthState: flow(function* updateAuthState() {
      const unsubscribe = onAuthStateChanged(auth, async (user) => {
        self.setAuthenticated(user)
      })
      // Don't forget to unsubscribe when the component unmounts
      return () => unsubscribe()
    }),
  }))
  .actions((self) => ({
    // This is a lifecycle method that gets called after the model is created.
    // It's a good place to do any setup. Especially if you're listening to events.
    // In our case, we're listening to the auth state of a user.
    afterCreate() {
      self.updateAuthState()
    },
    beforeDestroy() {
      //  @ts-ignore - typescript may not like this, but it'll work
      // https://github.com/infinitered/ignite/discussions/2469#discussioncomment-6284674
      self?.unsubscribe()
    },
  }))

3. I'd reload my managed Expo ignite app like so:

The first thing in the home page is this API request using Tanstack (aka React Query):

export const getDataHook = () => {
  const user = getUser()
  const userUid = getUserUid()

  const getDataRequest = async () => {
    // this line is causing the undefined error - apparently user is undefined
    const idToken = await user.getIdToken()
    const response = await axios({
      method: "get",
      url: `${...}/getDataEndpoint`,
      params: { userUid },
      headers: { Authorization: `Bearer ${idToken}` },
    })
      .then((res) => res)
      .catch((err) => console.log(err))

    return response as Props
  }

  const { isError, data, error, isFetching, refetch } = useQuery({
    queryKey: ["data-key"],
    retry: 0,
    queryFn: async () => {
      const data = await getDataRequest()
      return data.data.data as Props[]
    },
  })

  return { isError, data, error, isFetching, refetch }
}

I need the token to authenticate the request made to firebase. The user and userUid are fetched using the useStores hook.

This is the error I get, and the API request fails.

My initial theory was that the user object in state was not being rehydrated before the request was made. I arrived to this theory because in the API request, I log this:

  const getInventoryRequest = async () => {
    console.log("HIT")
    console.log(user)
    const idToken = await user.getIdToken()

and in the MST model, I log this:

  .actions((self) => ({
    updateAuthState: flow(function* updateAuthState() {
      const unsubscribe = onAuthStateChanged(auth, async (user) => {
        self.setAuthenticated(user)
        console.log("onAuthStateChanged\n\n\n\n", user)
      })
      // Don't forget to unsubscribe when the component unmounts
      return () => unsubscribe()
    }),
  }))

These are the logs, showing that the request is made before the tree action is triggered:

 LOG  
 {"apiKey": "...", "appName": "[DEFAULT]", "createdAt": "...", "email": "[email protected]", "emailVerified": false, "isAnonymous": false, "lastLoginAt": "1687808657940", "providerData": [{"displayName": null, "email": "[email protected]", "phoneNumber": null, "photoURL": null, "providerId": "password", "uid": "[email protected]"}], "stsTokenManager": {"accessToken": "...", "expirationTime": 1687812256210, "refreshToken": "..."}, "uid": "..."}
 
 WARN 
 [TypeError: undefined is not a function]
 
 LOG 
 onAuthStateChanged AFTER



 {"_redirectEventId": undefined, "apiKey": "...", "appName": "[DEFAULT]", "createdAt": "...", "displayName": undefined, "email": "[email protected]", "emailVerified": false, "isAnonymous": false, "lastLoginAt": "...", "phoneNumber": undefined, "photoURL": undefined, "providerData": [[Object]], "stsTokenManager": {"accessToken": "..., "expirationTime": 1687812256210, "refreshToken": "..."}, "tenantId": undefined, "uid": "..."}

Whats fishy to me is that the 2 user objects are different as well. I'm quite stuck on what it could be, whether it is even an MST issue, or firebase.

[azizsaad]

Hey!

Following up here - dyous know if this issue is relevant to ignite/MST, or a firestore issue?
Thanks!

[azizsaad]

Hey!

Just following up here if there's anything else I'm missing? I've tried various things i.e. using different firebase methods (onIdTokenChange), refreshing the token in the component where the request is being made (and not MST), but nothing has worked.

I suspected this may be due to the app rendering before MST is set up (therefore idToken is trying to be pulled from MST before it exists) but this is not it since the app is not rendered before the store is set up, I think.

Any help is appreciated 😅

[Meronkha]

Hey, running into a similar issue in my side - any resolutions?

[azizsaad]

Hey 👋

Its been a little while but I have since solved this problem. The issue was that we were attempting to run onAuthStateChanged in the MST, and not in app.tsx, in the root component. Despite MST being setup and hydrated upon boot, I assume the request made in onAuthStateChanged does not always run, versus when I put the following in the root component:

const { authenticationStore } = useStores()
  const [isUserObjectLoading, setIsLoading] = useState(false)

  useEffect(() => {
    setIsLoading(true)
    // onAuthStateChanged returns an unsubscriber
    const unsubscribeAuthStateChanged = onAuthStateChanged(auth, (authenticatedUser) => {
      authenticatedUser
        ? authenticationStore.setAuthenticated(authenticatedUser)
        : authenticationStore.setAuthenticated(null)
      setIsLoading(false)
    })

    // unsubscribe auth listener on unmount
    return unsubscribeAuthStateChanged
  }, [authenticationStore.user])

I don't immediately see why the same function, as outlined by yourself Jamon, wouldn't run in MST when the app starts, but eh, something to read into.

Thank you for your help :)))