--typescriptto the commands above. Clerk is written in Typescript, so it works out of the box without any extra configuration. For more information, you can reference the create-react-app documentation.
CLERK_FRONTEND_APIenvironment variable. Go to the Clerk Dashboard, select your Application, and navigate to Development ➜ Instance configuration and copy the Frontend API field.
.env.localin your application root. Any variables inside this file with the
REACT_APP_prefix will be accessible in your React code via
process.env.REACT_APP_VAR_NAME. Create a
REACT_APP_CLERK_FRONTEND_APIvariable and set it to the
Frontend APIyou copied earlier:
<ClerkProvider/>context. In React, we add this in
<ClerkProvider/>and pass the
REACT_APP_CLERK_FRONTEND_APIenv variable you just created to the
frontendApiprop. Replace your
<ClerkProvider/>also accepts a
navigateprop that enables Clerk to navigate inside your application without a full page reload, using the same routing logic your app does. Our display components use this prop when navigating between subpages, and when navigating to callback URLs.
navigateprop a function which takes the destination URL as an argument and performs a "push" navigation. You should not implement the push yourself, but instead wrap the push function provided by your router.
<App/>component with the router by modifying the
src/index.jsxfile as shown below:
src/App.jsximport and use the
useNavigatehook, as shown in the example:
<Hello/>component. We're going to use the
useUserhook and the
UserButtoncomponent as shown in the example: