S
SolidJS11mo ago
ATA noob

Is this Firebase Context correct?

I got this code online but not sure about it. Will the values come to me reactively. I'm worried that if I have a few protected(authenticated) routes, and firebase auth is still loading, then my user will get redirected to login page.
import { JSXElement, createContext, useContext } from "solid-js";
import { createStore } from "solid-js/store";
import { app } from "../configs/firebase";
import { Auth, getAuth, onAuthStateChanged, User } from "firebase/auth";

interface UserStore {
currentUser: User | null;
loading: boolean;
}

interface FirebaseStore {
user: UserStore;
auth: Auth;
}

const FirebaseContext = createContext<FirebaseStore>();

export const FirebaseProvider = (props: { children: JSXElement }) => {
const [user, setUser] = createStore<UserStore>({
currentUser: null,
loading: true,
});

const auth = getAuth(app);
onAuthStateChanged(auth, (currentUser) => {
setUser("currentUser", currentUser);
setUser("loading", false);
});

const store = {
user,
auth,
};

return (
<FirebaseContext.Provider value={store}>
{props.children}
</FirebaseContext.Provider>
);
};

export function useFirebase(): FirebaseStore {
return useContext(FirebaseContext)!;
// Non-null assertion as we'll always provide the context via FirebaseProvider
}
import { JSXElement, createContext, useContext } from "solid-js";
import { createStore } from "solid-js/store";
import { app } from "../configs/firebase";
import { Auth, getAuth, onAuthStateChanged, User } from "firebase/auth";

interface UserStore {
currentUser: User | null;
loading: boolean;
}

interface FirebaseStore {
user: UserStore;
auth: Auth;
}

const FirebaseContext = createContext<FirebaseStore>();

export const FirebaseProvider = (props: { children: JSXElement }) => {
const [user, setUser] = createStore<UserStore>({
currentUser: null,
loading: true,
});

const auth = getAuth(app);
onAuthStateChanged(auth, (currentUser) => {
setUser("currentUser", currentUser);
setUser("loading", false);
});

const store = {
user,
auth,
};

return (
<FirebaseContext.Provider value={store}>
{props.children}
</FirebaseContext.Provider>
);
};

export function useFirebase(): FirebaseStore {
return useContext(FirebaseContext)!;
// Non-null assertion as we'll always provide the context via FirebaseProvider
}
2 Replies
Brendonovich
Brendonovich11mo ago
Looks good, I’d suggest only calling setUser once and passing in both values rather than separately
ATA noob
ATA noobOP11mo ago
Thank you

Did you find this page helpful?