Persist Global Context data across all pages

Developer Support
1

What are you trying to do? (please be as specific as possible and include relevant screenshots, code snippets, and reproduction steps)
I’m trying to know if I’m going to be able to use Plasmic for my use cases.
In my use cases, all of the auth/RBAC logic is handled by my backend.

What have you tried so far? (please link relevant docs and other forum posts)
I created a simple login page and a content page to redirect logged in users. I also created a Global Context to provide the data and actions.

What is the problem with this approach?
When a page is rendered, the Global Context is also re-rendered, so the data doesn’t persist.
Here’s the Global Context I created:

import { useState, useMemo } from "react";
import { DataProvider, GlobalActionsProvider } from "@plasmicapp/loader-react";

export const MyGlobalContext = ({ children }) => {
    const [tokens, setTokens] = useState(null);
    
    const logIn = async (email, password) => {
      // get tokens from my backend
      var tokensInfo = await fetch(...)
      setTokens(tokensInfo);
      return tokensInfo
    };

    const actions = useMemo(
      () => ({
        logIn: (email, password) => logIn(email, password)
                                    .then(token => token)
                                    .catch(error => console.error({error})),
      }),
      []
    );

  return (
    <GlobalActionsProvider contextName="MyGlobalContext" actions={actions}>
      <DataProvider name="tokens" data={tokens}>
        {children}
      </DataProvider>
    </GlobalActionsProvider>
  );
};

Thanks in advance!

2

GlobalContexts in the loader use case always re-render when changing pages because of the way they are bundled (we only have access to the pages, not the user _app.js).

That’s why in our example here we added an useEffect that sets the user initially:

 // Get current user on mount
  useEffect(() => {
    getCurrentUser(authUrl).then(user => setUser(user));
  }, [authUrl]);

In your login action, you need to save the user data in localStorage/cookie and fetch it here.

For the codegen use case, the user has control over where the GlobalContext is located, and they can add it to _app.ts instead.