> ## Documentation Index
> Fetch the complete documentation index at: https://docs.turnkey.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Social logins
> Configure and implement social logins in your React Native app using `@turnkey/react-native-wallet-kit`.
## Configuring OAuth
Using OAuth requires a bit of configuration in the Turnkey Dashboard and your app configuration.
### Enabling OAuth
Navigate to the **Wallet Kit** section in the [Turnkey Dashboard](https://app.turnkey.com/dashboard/walletKit) and enable the
**OAuth**. Note if you have not enabled the Auth Proxy, you will need to do so first. Check out the [Getting Started](/sdks/react-native/getting-started) guide for more details.
### Configuring OAuth providers
You must enable the OAuth providers you want to use in the **Social logins** section.
#### Client IDs
You can choose to enter your client IDs for each OAuth provider and the redirect url in the dashboard
Or, you can provide the client IDs and redirect URI through environment variables and pass them in the `TurnkeyProvider`'s config.
This is useful if you want to use different OAuth client IDs or a different redirect URL for different environments (e.g., development, staging, production).
You can retrieve the client IDs from the OAuth provider's dashboard. Note that the redirect URI must match the one you configured in the dashboard or in the TurnkeyProvider config.
For OAuth2.0 providers, you will need to upload the client ID and secret in
the dashboard. Check out the [OAuth2.0
providers](/sdks/react-native/authentication/social-logins#oauth2-0-providers)
section for more details.
#### Client configuration
If you choose to provide the client IDs and redirect URI through environment variables, you can do so in the `TurnkeyProvider`'s config..
Additionally, you must provide `auth.oauth.appScheme` in your app config in order to use the deep link completion for OAuth in React Native.
```ts constants/turnkey.ts theme={"system"}
import type { TurnkeyProviderConfig } from "@turnkey/react-native-wallet-kit";
export const TURNKEY_CONFIG: TurnkeyProviderConfig = {
organizationId: process.env.EXPO_PUBLIC_ORGANIZATION_ID!,
authProxyConfigId: process.env.EXPO_PUBLIC_AUTH_PROXY_CONFIG_ID!,
auth: {
oauth: {
appScheme: "myapp", // Required for RN deep link completion
// You can also provide these values through the Turnkey dashboard:
// Note: If no redirect URI is provided, the default redirect URI will be used `https://oauth-redirect.turnkey.com`
oauthRedirectUri: process.env.EXPO_PUBLIC_REDIRECT_URI || "", // Eg: "https://myapp.com/home". This must match the redirect URI configured in your OAuth provider's dashboard.
// You will typically get these from the OAuth provider's dashboard. Eg: Google developer console.
google: { clientId: process.env.EXPO_PUBLIC_GOOGLE_CLIENT_ID },
apple: { clientId: process.env.EXPO_PUBLIC_APPLE_CLIENT_ID },
facebook: { clientId: process.env.EXPO_PUBLIC_FACEBOOK_CLIENT_ID },
x: { clientId: process.env.EXPO_PUBLIC_X_CLIENT_ID },
discord: { clientId: process.env.EXPO_PUBLIC_DISCORD_CLIENT_ID },
},
},
};
```
Make sure your Expo `app.json` includes your deep link scheme:
```json app.json theme={"system"}
{
"expo": {
"scheme": "myapp"
}
}
```
## Usage
In your app, call the corresponding helper for each provider from `useTurnkey`: `handleGoogleOauth`, `handleAppleOauth`, `handleFacebookOauth`, `handleDiscordOauth`, and `handleXOauth`.
```tsx app/index.tsx expandable theme={"system"}
import { useState } from "react";
import { Alert, Button, View } from "react-native";
import { useRouter } from "expo-router";
import { useTurnkey } from "@turnkey/react-native-wallet-kit";
export default function SocialLoginButtons() {
const router = useRouter();
const {
handleGoogleOauth,
handleAppleOauth,
handleFacebookOauth,
handleDiscordOauth,
handleXOauth,
} = useTurnkey();
const [loading, setLoading] = useState(false);
const wrap = (fn: () => Promise) => async () => {
try {
setLoading(true);
await fn();
router.replace("/(main)");
} catch (err) {
Alert.alert("Error", String(err));
} finally {
setLoading(false);
}
};
return (
);
}
```
## Provider details
### Oauth providers
#### Google
Requirements:
* Dashboard: enable Google in Wallet Kit → Authentication.
* Client ID: use a Web client ID in the Google developer console and set it in the Dashboard or in the `TurnkeyProvider`'s config.
Usage:
```tsx theme={"system"}
const { handleGoogleOauth } = useTurnkey();
await handleGoogleOauth();
```
#### Apple
Requirements:
* Turnkey Dashboard: enable Apple.
* Client ID: set Apple Services ID in the Dashboard or in the `TurnkeyProvider`'s config.
* Provider Dashboard: Set the Redirect URI to `myapp://`
Usage:
```tsx theme={"system"}
const { handleAppleOauth } = useTurnkey();
await handleAppleOauth();
```
#### Facebook
Requirements:
* Turnkey Dashboard: enable Facebook.
* Client ID: set in Dashboard or in the `TurnkeyProvider`'s config.
* Provider Dashboard: Set the Redirect URI to `myapp://`
Usage:
```tsx theme={"system"}
const { handleFacebookOauth } = useTurnkey();
await handleFacebookOauth();
```
### OAuth2.0 providers
For OAuth providers that exclusively use OAuth2.0 (e.g., X, Discord), you will need to configure a few additional settings in your Turnkey Dashboard.
In the **Wallet Kit** section of the dashboard, head to the **Socials** tab and click **Add provider**.
Select the provider you want to add from the dropdown, and fill in the required fields.
You can find these values in the provider's developer console.
Any secrets will automatically be encrypted before uploading to Turnkey.
Once you've added the provider, head back to the **Authentication** tab, and enable the provider you just added under the **SDK Configuration** section.
Click **Select** to choose your newly added client ID, then click **Save Settings**. You can also simply enter the client ID in the `TurnkeyProvider`'s config as shown above.
#### Discord
Requirements:
* Turnkey Dashboard: enable Discord (OAuth 2.0 provider).
* Client ID: set in Dashboard or in the `TurnkeyProvider`'s config.
* Provider Dashboard: Set the Redirect URI to `myapp://`
Usage:
```tsx theme={"system"}
const { handleDiscordOauth } = useTurnkey();
await handleDiscordOauth();
```
#### X (Twitter)
Requirements:
* Turnkey Dashboard: enable X (OAuth 2.0 provider).
* Client ID: set in Dashboard or in the `TurnkeyProvider`'s config.
* Provider Dashboard: Set the Redirect URI to `myapp://`
Usage:
```tsx theme={"system"}
const { handleXOauth } = useTurnkey();
await handleXOauth();
```
### Configuring OAuth providers
You must enable the OAuth providers you want to use in the **Social logins** section.
#### Client IDs
You can choose to enter your client IDs for each OAuth provider and the redirect url in the dashboard
Or, you can provide the client IDs and redirect URI through environment variables and pass them in the `TurnkeyProvider`'s config.
This is useful if you want to use different OAuth client IDs or a different redirect URL for different environments (e.g., development, staging, production).
You can retrieve the client IDs from the OAuth provider's dashboard. Note that the redirect URI must match the one you configured in the dashboard or in the TurnkeyProvider config.
Select the provider you want to add from the dropdown, and fill in the required fields.
You can find these values in the provider's developer console.
Any secrets will automatically be encrypted before uploading to Turnkey.
Once you've added the provider, head back to the **Authentication** tab, and enable the provider you just added under the **SDK Configuration** section.
Click **Select** to choose your newly added client ID, then click **Save Settings**. You can also simply enter the client ID in the `TurnkeyProvider`'s config as shown above.
#### Discord
Requirements:
* Turnkey Dashboard: enable Discord (OAuth 2.0 provider).
* Client ID: set in Dashboard or in the `TurnkeyProvider`'s config.
* Provider Dashboard: Set the Redirect URI to `myapp://`
Usage:
```tsx theme={"system"}
const { handleDiscordOauth } = useTurnkey();
await handleDiscordOauth();
```
#### X (Twitter)
Requirements:
* Turnkey Dashboard: enable X (OAuth 2.0 provider).
* Client ID: set in Dashboard or in the `TurnkeyProvider`'s config.
* Provider Dashboard: Set the Redirect URI to `myapp://`
Usage:
```tsx theme={"system"}
const { handleXOauth } = useTurnkey();
await handleXOauth();
```