> 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-native-sdk-components/miscellaneous/login-component.md).

# Login Component

## Components Visuals 

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

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

{% tab title="Visual 1" %}

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

{% tab title="Visual 2" %}

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

{% tab title="Visual 3" %}

<figure><img src="/files/ijKDsheXyvabzTfK3yCl" 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-native-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:

```
npm install @questlabs/react-native-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="259">PropName</th><th width="120">Type</th><th width="109">Required</th><th>Details</th></tr></thead><tbody><tr><td><strong>googleClientId</strong></td><td>string</td><td>optional</td><td>The Google Client ID for OAuth 2.0 authentication.</td></tr><tr><td><strong>redirectUri</strong></td><td>string</td><td>optional</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>optional</td><td>The URL where users will be redirected after authentication.</td></tr><tr><td><strong>mainViewStyle</strong></td><td>ViewStyle</td><td>optional</td><td>Main View Styling</td></tr><tr><td><strong>headerTextStyle</strong></td><td>TextStyle</td><td>optional</td><td>Header Text Styling for Welcome Back</td></tr><tr><td><strong>headerTextStyle2</strong></td><td>TextStyle</td><td>optional</td><td>Header Text Styling for Please Enter Delails Text</td></tr><tr><td><strong>ContinueBtnViewStyle</strong></td><td>ViewStyle</td><td>optional</td><td>Continue Buton ViewStyle</td></tr><tr><td><strong>ContinueBtnTextStyle</strong></td><td>TextStyle</td><td>optional</td><td>Continue Button TextStyle</td></tr><tr><td><strong>GoogleViewStyle</strong></td><td>ViewStyle</td><td>optional</td><td>Google Button ViewStyle</td></tr><tr><td><strong>GoogleTextStyle</strong></td><td>TextStyle</td><td>optional</td><td>Google Button TextStyle</td></tr><tr><td><strong>headerTextStyle3</strong></td><td>TextStyle</td><td>optional</td><td>Header Text Styling for Please Enter Otp Text</td></tr><tr><td><strong>OtpTextStyle</strong></td><td>TextStyle</td><td>optional</td><td>Otp Label TextStyle</td></tr><tr><td><strong>OtpContViewStyle</strong></td><td>ViewStyle</td><td>optional</td><td>Otp Input ViewStyle</td></tr><tr><td><strong>OtpInputTextStyle</strong></td><td>TextStyle</td><td>optional</td><td>Single OtpInput TextStyle</td></tr><tr><td><strong>VerifyBtnViewStyle</strong></td><td>ViewStyle</td><td>optional</td><td>Verify Button ViewStyle</td></tr><tr><td><strong>VerifyBtnTextStyle</strong></td><td>TextStyle</td><td>optional</td><td>Verify Button TextStyle</td></tr></tbody></table>

***

## Usage

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

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

```
import { QuestProvider, Login} from '@questlabs/react-native-sdk'
```

```
<QuestProvider
  apiKey="your-api-key"
  apiSecret="your-api-secret"
  entityId="your-entity-id"
>
  <Login
    googleClientId="your-google-client-id"
    redirectUri="your-redirect-uri"
    redirectURL="your-redirect-url"
  />
</QuestProvider>
```

{% hint style="info" %}
Replace `"your-api-key"`, `"your-api-secret"`, 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`Login` component within your React application

```
import { Button, Text, SafeAreaView, StyleSheet } from "react-native";
import { Login } from "@questlabs/react-native-sdk";
export default function App() {
  return (
    <SafeAreaView style={styles.container}>
    
     <QuestProvider
        apiKey="Your-Api-Key"
        apiSecret="Your-Api-Secret"
        entityId="Your-Api-entityId"
        > 
        
        <Login 
           googleClientId= {'your-google-client-id'}
           redirectUri = {'your-redirect-uri'}
           redirectURL = {'your-redirect-url' }
           mainViewStyle = {{ backgroundColor: 'grey' ,borderRadius: 10}}
           headerTextStyle = {{ color: 'white' fontSize: 20 }}
           ContinueBtnViewStyle = {{ width : 200}}
           ContinueBtnTextStyle = {{  fontSize: 20}}
           //Props
        />
     </QuestProvider>
    
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    marginTop: 40,
    padding: 20,
    justifyContent: "center",
    alignItems: "center",
  },
});
```

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