> For the complete documentation index, see [llms.txt](https://docs.questera.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/login-component.md).

# Login Component

## Component Visuals

{% tabs %}
{% tab title="Overview" %}

<figure><img src="/files/xwCnJIcPzEr7iuK8Uyap" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 1" %}

<figure><img src="/files/M42I3EhH4FF4h9eGA7Ck" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="/files/csMEkl0piFBys6oFNtBZ" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Untitled" %}

<figure><img src="/files/HP2GIZnyUrUXIzIR0fq5" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
To unlock early access to the component                                                      [**Get Access**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)
{% endhint %}

## Installation

To install the `Quest react-sdk` into your project, follow these steps:

* Open your terminal/command prompt.
* Navigate to your project's root directory using the `cd` command if you're not already there.
* Run the following command to install the `quest-sdk` package using npm:

```jsx
npm install @questlabs/react-sdk
```

> This command will download and install the package and its dependencies into your project.

{% hint style="info" %}
Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.
{% endhint %}

***

## Props of Login Component

The `QuestLogin` component accepts the following props

<table><thead><tr><th width="215">Prop Name</th><th width="107">Type</th><th width="115">Required</th><th>Details</th></tr></thead><tbody><tr><td><strong>googleClientId</strong></td><td>string</td><td>required</td><td>The Google Client ID for OAuth 2.0 authentication.</td></tr><tr><td><strong>redirectUri</strong></td><td>string</td><td>required (<strong>google login</strong>)</td><td>The URI where users will be redirected after authentication. Ensure that this URL matches the one configured in your OAuth provider (Google Console).</td></tr><tr><td><strong>redirectURL</strong></td><td>string</td><td>required</td><td>The URL where users will be redirected after authentication.</td></tr><tr><td><strong>btnColor</strong></td><td>string</td><td>optional</td><td>The background color of the login button</td></tr><tr><td><strong>btnTextColor</strong></td><td>string</td><td>optional</td><td>The text color of the login button.</td></tr><tr><td><strong>textColor</strong></td><td>string</td><td>optional</td><td>The text color of other UI elements in the component.</td></tr><tr><td><strong>font</strong></td><td>string</td><td>optional</td><td>set your font family</td></tr><tr><td><strong>backgroundColor</strong></td><td>string</td><td>optional</td><td>The background color of the entire component.</td></tr><tr><td><strong>headingText</strong></td><td>string</td><td>optional</td><td>set the main heading of the component</td></tr><tr><td><strong>descriptionText</strong></td><td>string</td><td>optional</td><td>set the main description of the component</td></tr><tr><td><strong>google</strong></td><td>boolean</td><td>optional</td><td>When set to <code>true</code>, you will see only login with Google option</td></tr><tr><td><strong>googleButtonText</strong></td><td>string</td><td>optional</td><td>set the text in google button</td></tr><tr><td><strong>IconColor</strong></td><td>string</td><td>optional</td><td>set the icon color</td></tr><tr><td><strong>email</strong></td><td>boolean</td><td>optional</td><td>When set to <code>true</code>, you will see only login with Email option</td></tr><tr><td><strong>onSubmit</strong></td><td>function</td><td>optional</td><td>A callback function trigger on when click on submit button <br>took an object with key userId,token </td></tr><tr><td><strong>onError</strong></td><td>function</td><td>optional</td><td>A callback function trigger on when component through an error</td></tr><tr><td><strong>showFooter</strong></td><td>boolean</td><td>optional</td><td>true: show quest footer,<br>false: hide quest footer</td></tr><tr><td><strong>styleConfig</strong></td><td>object</td><td>optional</td><td>An object containing CSS properties for styling various components within the Login process, including  headings, form, text area,  descriptions, inputs, labels, and buttons.</td></tr><tr><td><strong>IconStyle</strong></td><td>object</td><td>optional</td><td>An object containing CSS properties for Icons, it includes BorderColor, Background, Color </td></tr></tbody></table>

You can customize the UI with type of styleConfig would be

```
styleConfig?: {
    Heading?: CSSProperties;
    Description?: CSSProperties;
    Input?: CSSProperties;
    Label?: CSSProperties;
    TextArea?: CSSProperties;
    PrimaryButton?: CSSProperties;
    SecondaryButton?: CSSProperties;
    Form?:CSSProperties;
    Footer?: {
      FooterStyle?: CSSProperties;
      FooterText?: CSSProperties;
      FooterIcon?: CSSProperties;
    };
    IconStyle?: {
      BorderColor?: string
      Background?: string;
      color?: string;
    }
    OtpInput?: CSSProperties
  };
```

## Usage

To integrate the `QuestLogin` component into your React application, follow these steps

* **Import the CSS**: In your JavaScript or TypeScript file where you're using the `QuestLogin`, import the CSS styles for the component. This ensures that the component's styling is applied correctly.

```jsx
import '@questlabs/react-sdk/dist/style.css'
```

* **Import the QuestLogin Component**: Import the `QuestLogin`component from the `@questlabs/react-sdk` package.
* **Import the QuestProvider Component**: Import the `QuestProvider` component from the `@questlabs/react-sdk` package.

```jsx
import { QuestProvider, QuestLogin }  from '@questlabs/react-sdk';
```

* **Pass the Required Props**:  Pass the required props to the `QuestProvider`. The required props are `apiKey`, `apiSecret`, and `entityId`. and required props for the `QuestLogin` component are `googleClientId, redirectURL, redirectUri`

```jsx
<QuestProvider 
  apiKey={"api key"}
  entityId={"your entity Id"}
  featureFlags={{}}
  themeConfig={{
   primaryColor: '',
   secondaryColor: '',
   borderColor: '',
   buttonColor: '',
   backgroundColor: 'white',
   fontFamily: '',
}}
  >
  <QuestLogin 
     googleClientId="your client id"
     font='Hanken Grotesk'
     textColor="black"
     btnTextColor="black"
     backgroundColor="yellow"
     btnColor="skyblue"
     redirectUri="https://app.questapp.ai/login"
     redirectURL="https://www.questlabs.ai/"
     google={true}
     email={true}
     styleConfig = {{
      Form:{},
      Heading:{},
      Description:{},
      Input:{},
      Label:{},
      TextArea:{},
      PrimaryButton:{},
      SecondaryButton:{},
      Footer: {
         FooterStyle: {},
         FooterText: {},
         FooterIcon: {}
      }
    }}
   //  headingText=''
   //  descriptionText=''
   //  googleButtonText=''
   //  IconColor=''
   //  showFooter={false}
  />
</QuestProvider>


```

{% hint style="info" %}
Replace `"your-api-key"`, and `"your-entity-id"` with your actual Quest API credentials&#x20;
{% endhint %}

{% hint style="info" %}
Replace `"your-google-client-id"`, `"your-redirect-uri"`, and `"your-redirect-url"` with your actual configuration details.
{% endhint %}

***

## Example Usage

Here's an example of how to use the `QuestLogin` component within your React application

```jsx
import { QuestProvider, QuestLogin } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css';

function App() {
  return (
    <div>
      <QuestProvider 
       apiKey={"api key"}
       entityId={"your entity Id"}
       featureFlags={{}}
       themeConfig={{
        primaryColor: '',
        secondaryColor: '',
        borderColor: '',
        buttonColor: '',
        backgroundColor: 'white',
        fontFamily: '',
     }}
       >
       <QuestLogin 
          googleClientId="your client id"
          font='Hanken Grotesk'
          textColor="black"
          btnTextColor="black"
          backgroundColor="yellow"
          btnColor="skyblue"
          redirectUri="https://app.questapp.ai/login"
          redirectURL="https://www.questlabs.ai/"
          google={true}
          email={true}
          styleConfig = {{
           Form:{},
           Heading:{},
           Description:{},
           Input:{},
           Label:{},
           TextArea:{},
           PrimaryButton:{},
           SecondaryButton:{},
           Footer: {
              FooterStyle: {},
              FooterText: {},
              FooterIcon: {}
           }
         }}
        //  headingText=''
        //  descriptionText=''
        //  googleButtonText=''
        //  IconColor=''
        //  showFooter={false}
       />
     </QuestProvider>


    </div>
  );
}

export default App;
```

## Demo

In this video, you'll learn:

1. How to set up the `QuestProvider` with your API credentials.
2. Configuration of the `QuestLogin` component with required props.
3. Customization options for the login component.
4. Integration of the component into your React application.

{% embed url="<https://drive.google.com/file/d/1LN-tJg7UQX8XvXEVudqQJnROEIPU5_Cb/view?usp=drive_link>" %}
Demo of how to use QuestLogin Component
{% endembed %}

{% hint style="info" %}
The above example uses all the props.
{% endhint %}

***