## React embedded login quickstart

This guide walks you through integrating Frontegg’s login box into your React app, with built-in support for Sign In, Sign Up, SSO, and automatic redirects—all in just a few lines of code.

br
Check out the sample package on GitHub

br
Getting your Frontegg subdomain and `clientId`
Frontegg creates a unique subdomain and client id for every environment created on the account. In order to retrieve the clientId `subdomain` that will act as the `baseUrl` in the integration, navigate to your workspace `Keys & domains` menu, and copy the Frontegg domain and `clientId`.

### Step 1: Create a Vite.js app with React

If you have an existing app, skip this step.

br
To create a new app, use the following script.

br

```
npm create vite@latest app-with-frontegg --template react
```

br
Run the following command to install the Frontegg React.JS library.



```
npm install @frontegg/react react-router-dom
```


```
yarn add @frontegg/react react-router-dom@5.3.0
```

br
### Step 2: Configure

Wrap your root component with `FronteggProvider`.


See [`contextOptions`](/ciam/sdks/components/fronteggappoptions#contextoptions) for more information.


```typescript
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { FronteggProvider } from '@frontegg/react';


const contextOptions = {
  baseUrl: 'https://[YOUR-SUBDOMAIN].frontegg.com',
  appId: '[YOUR-APP-ID]' 
};

const authOptions = {
  keepSessionAlive: true // Keeps the session alive by refreshing the JWT in the background
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <FronteggProvider 
    contextOptions={contextOptions} 
    hostedLoginBox={false}
    authOptions={authOptions}
    >
        <App />
    </FronteggProvider>
  </React.StrictMode>,
  document.getElementById('root')
);
```

See [`keepSessionAlive`](/ciam/sdks/components/fronteggstoreoptions#keepsessionalive) and [`hostedLoginBox`](/ciam/sdks/components/fronteggappoptions#hostedloginbox) for more information.

### Step 3: Getting the user context

Frontegg exposes the user context and the authentication state via the useAuth hook which allows you to redirect non-authenticated users to the login page and to get the user's information.


```typescript
import { useAuth } from '@frontegg/react'

function App() {
  const { user, isAuthenticated } = useAuth();

  return (
    <div className='App'>
      {isAuthenticated && (
        <div>
          <img src={user.profilePictureUrl} alt={user.name} />
          <span>{user.name}</span>
        </div>
      )}
    </div>
  );
}
export default App;
```

br
**Login and logout routes have been added to your app**:


- Signup screen is at `http://localhost:3000/account/sign-up`
- Login screen is at `http://localhost:3000/account/login`
- If you are already logged in, go to `http://localhost:3000/account/logout` and log out.


Great, Frontegg is now integrated with your app!


Run your app and click on the Click me to login button.