# Login Component

## Components Visuals 

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

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FpijcFe1mQ6GLGXA6SXXR%2Flogin.png?alt=media&#x26;token=a6763bdd-162e-4677-9862-3211ea96b6eb" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 1" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FvduKdOxuyRuYTC6Z8TpF%2Flogin%201.png?alt=media&#x26;token=eee857a1-9d07-4e2f-a976-ffe0d51aebbc" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FCyXoA4cS0gPdjyYJ1onL%2Flogin%202.png?alt=media&#x26;token=53f0dc2b-5997-4271-95d0-8fba12d69612" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 3" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FLqjvqWcHP9wY0PccLJsk%2Flogin%203.png?alt=media&#x26;token=1e6b562d-b4bf-4f3a-a042-fd3ca48c9d93" 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 %}