How can I programmatically set the user details for Launch Darkly in my react app

Question

I am wrapping my App.js file in the withLDProvider component and I want to know how I can set the user information from inside of my App function.

Let's say for example I get the username that is cached in Dexie inside of my App function, how can I pass that user information to where the user details are set when exporting the App function.

I can already get all my user information, just not sure how I am supposed to pass the user information. I feel like I am taking the wrong approach here but am not too sure exactly how to go about this.

import React from 'react';
import './App.css';
import { withLDProvider } from 'launchdarkly-react-client-sdk';
import HelloWorld from './HelloWorld';

const App = () => {
  const [user, setUser] = useState({});

  // Let's say for example that I asynchronously get my
  // user information here and use hooks to set the user

  return (
    <div className="App">
      <header className="App-header">
        {
           user ? <HelloWorld  />
           : <div>A login screen would go here</div>
        }
      </header>
    </div>
  );
}

export default withLDProvider({
  clientSideID: 'client_id',
  user: {
    key: 'user_key',
    name: 'User Name',
    email: '[email protected]'
  }
})(App);

Answer 1

Open to any better ideas, but this seems to work for now

Seems like I managed to miss the answer in the docs.

What I ended up doing was initialising LD without a user and then setting the user one level down in the hierarchy with the identify() function. It's available from the ldclient prop that is passed to any of the child components.

ldclient.identify(newUser, hash, function() {
  console.log("New user's flags available");
});

Answer 2

Here's the documentation for B.L.Coskey's answer. Thanks for pointing us in the right direction to identify user credentials after initializing the App with withLDProvider!

I am using TypeScript + the LaunchDarkly React SDK, and was having difficulty properly setting the type of the ldClient prop. I found that an alternative is to import the useLDClient() from launchdarkly-react-client-sdk. Here's essentially how I got my code to work:

import React from "react";
import NotFound from "./NotFound";
import { hookThatGivesAccountDetails } from "@/hooks/hookThatGivesAccountDetails";
import { useLDClient, useFlags } from "launchdarkly-react-client-sdk";

const ExamplePage = () => {
  const ldClient = useLDClient();
  const flagForThisFeature = useFlags().flagForThisFeature;
  const userEmail = hookThatGivesAccountDetails.emailAddress

  if (userEmail !== null && userEmail !== undefined && ldClient) {
    const ldUser = {
      key: userEmail,
    };

    ldClient.identify(ldUser, undefined);
  }

  if (!flagForThisFeature) {
    return <NotFound />;
  }

  return (
    <>
      {/* Code to show when the feature flag returns true */}
    </>
  );
};

export default ExamplePage;