# React Native

**Requirements**

```
npm i react-native-webview expo-secure-store
```

**Step 1: Add Secqure SDK**

{% tabs %}
{% tab title="npm" %}
npm i secqure-react-native-sdk
{% endtab %}
{% endtabs %}

**Step 2: Import Secqure SDK in your project**

```
import {Secqure_Webview} from "secqure-react-native-sdk"
```

Step 3: Configure Navigation

```
<NavigationContainer>
        <Stack.Screen name="Secqure_Webview" component={Secqure_Webview} />
</NavigationContainer>
```

Step 4: Route invocation and Callback

```
navigation.navigate("Secqure_Webview", {
                apiKey: "XXXXXXXXXXXXXXXX",
                secretKey: "XXXXXXXXXXXX",
                callback: (payload) => {},
                });
```

Above steps render a login form like below

![](https://2956668860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiVBIrxDmPKqx322_kk%2Fuploads%2FfsO7V5ky0hqvSveZAZeC%2FRN-webview.jpeg?alt=media\&token=900d605c-f3dc-4345-a926-a157a58023f0)

Secqure returns User details and tokens upon first authentication and only tokens in subsequent authentications. You can use User identity information as required. Your backend server should validate the access & Id tokens and extract information. Use SDKs to validate tokens

```
{
	"tokens": {
		"accessToken": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiO...",
		"idToken": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIz...",
		"refreshToken": "f76d722afc0ec69e5aa11838a03569a524f3a2448932"
	},
	"user": {
		"pubKey": "i50MtIDpmQaFqozPYR6u3diOft0X6X75",
		"userId": "XXXXXX",
		"systemId": "3526b57c-f017-4659-bbb4-b1442046e46e",
		"createTime": "2022-01-17T07:21:34.356Z",
		"updateTime": "2022-01-17T07:21:49.000Z",
		"deviceType": "Win32",
		"deviceName": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36"
	}
}
```

```
{
"accessToken": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiO...",
"idToken": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIz...",
"refreshToken": "f76d722afc0ec69e5aa11838a03569a524f3a2448932"
}
```

**Congratulations... You are done!!!**