Frontend Configuration
React Frontend Setup
The LunaDefend frontend library @lunasec/react-sdk
comes with a collection of components that create iFrames under the hood and handle tokenization.
Configuration
The Secure Components get their configuration from the <LunaSecConfigContext.Provider>
, which is typically placed somewhere near the root
of your component tree. Components rendered outside the provider won't work.
import { LunaSecConfigContext } from '@lunasec/react-sdk';
export const MyApp = () => {
return (
<LunaSecConfigContext.Provider
value={{
// This is the domain the LunaSec Tokenizer backend is hosted on, which will be different in prod vs dev
lunaSecDomain: process.env.LUNASEC_DOMAIN || 'http://localhost:37766',
authenticationErrorHandler: (e: Error) => {
// You may wish to render some error UI or perform an action like page refresh if LunaSec fails to authenticate
setAuthError('Failed to authenticate with LunaSec. \n Is a user logged in?');
},
}}
>
<App/>
</LunaSecConfigContext.Provider>
);
};
Now we can use LunaDefend's components. Next we'll create a Secure Form.