## React hosted login quickstart

Quickly integrate Frontegg’s login box into your React app with support for Sign In, Sign Up, and SSO — using built-in support for redirects, OpenID Connect, and OAuth2.

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.



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

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.


```js
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={true}
    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.

br
Navigate to [Frontegg Portal](https://portal.frontegg.com/) → [ ENVIRONMENT ] → Authentication → Login Method, add `http://localhost:5137/oauth/callback` or `http://localhost:3000/oauth/callback` as the allowed `redirectUrl` (should be in accordance with the port your application is running on).

br
### Step 3: Redirect to login

Using the Frontegg `useAuth` hook, you can determine whether a user is authenticated or not.
If the user is not authenticated, you can redirect the user to login via the `useLoginWithRedirect` hook as shown below.

br

```typescript
import './App.css';
import { useEffect } from 'react';
import { useAuth, useLoginWithRedirect, ContextHolder } from "@frontegg/react";
​
function App() {
  const { user, isAuthenticated } = useAuth();
  const loginWithRedirect = useLoginWithRedirect();
​
  // Use as below to redirect to login automatically
  useEffect(() => {
    if (!isAuthenticated) {
      loginWithRedirect();
    }
  }, [isAuthenticated, loginWithRedirect]);
  
  const logout = () => {
    const baseUrl = ContextHolder.for().getContext().baseUrl;
    window.location.href = `${baseUrl}/oauth/logout?post_logout_redirect_uri=${window.location.href}`;
  };
  
  return (
    <div className="App">
      { isAuthenticated ? (
        <div>
          <div>
            <img src={user?.profilePictureUrl || undefined} alt={user?.name}/>
          </div>
          <div>
            <span>Logged in as: {user?.name}</span>
          </div>
          <div>
            <button onClick={() => alert(user?.accessToken)}>What is my access token?</button>
          </div>
          <div>
            <button onClick={() => logout()}>Click to logout</button>
          </div>
        </div>
      ) : (
        <div>
          <button onClick={() => loginWithRedirect()}>Click me to login</button>
        </div>
      )}
    </div>
  );
}

export default App;
```

br
Great, Frontegg is now integrated with your app!

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

### Troubleshooting

When using Frontegg’s React hosted login implementation, ensure that the `useEffect` hook responsible for handling authentication is not commented out. To persist the user's state after login—especially when using React Strict Mode—be sure to review [this](/ciam/guides/troubleshoot/faq/react-strict-mode) article for guidance on avoiding refresh loops and unintended redirects.