# LinkedIn OAuth

How to add LinkedIn OAuth to your Instant app.



Instant supports logging users in with their LinkedIn account. There are a few ways to do this: it depends on whether you are building for web or React Native.

Choose the option that sounds best to you, and the rest of the document will show you how to add Sign in with LinkedIn to your app.




**Building for Web?**

- **Web Redirect**: Easier to integrate, but doesn't let you render your custom app name.



**Building for React Native?**

- **Expo Web Auth**: Use Expo's auth session to integrate browser-based sign-in. Easier to implement, but doesn't let you render your custom app name.





## Overview

There are three main steps:

1. **LinkedIn Developer Console**: Create an Oauth client.
2. **Instant Dashboard**: Connect your Oauth client to Instant
3. **Your app**: Add some code to log in with LinkedIn!

Let's dive deeper in each step:

## 1. Create an Oauth client

1. Head to the [LinkedIn developer portal](https://www.linkedin.com/developers/apps) and create a new application (or open an existing one).
2. In the **Auth** tab enable **Sign In with LinkedIn**.
3. Add the following redirect URI to your application:

```text
https://api.instantdb.com/runtime/oauth/callback
```



Save your Client ID and your Client Secret -- you'll need it for the next step!



## 2. Connect your Oauth client to Instant

**Add your Oauth Client on Instant**



**From the dashboard**


From the [Auth](/dash?s=main&t=auth) tab on the Instant dashboard:

- Click "Set up LinkedIn"
- Enter a unique name for your client (e.g., "linkedin-web")
- Enter your "Client ID"
- Enter your "Client Secret"
- Click "Add Client"



**From the terminal**


```shell
npx instant-cli@latest auth client add \
  --type linkedin --name linkedin-web \
  --client-id <id> --client-secret <secret>
```







**Register your website with Instant**

If you're testing from localhost, add `http://localhost:3000` (replacing `3000` with the port you use). For production, add your website's domain.



**From the dashboard**


From the [Auth](/dash?s=main&t=auth) tab on the Instant dashboard, add your URL to the **Redirect Origins** list.



**From the terminal**


```shell
npx instant-cli@latest auth origin add --type website --url <your-domain>
```







And voila, you are connected!

## 3. Add some code!



**Method: Web Redirect**

Create an authorization URL via `db.auth.createAuthorizationURL` and then use the url to create a link. Here's a full example:

```jsx 
'use client';

import React, { useState } from 'react';
import { init } from '@instantdb/react';

const APP_ID = '__APP_ID__';

const db = init({ appId: APP_ID });

const url = db.auth.createAuthorizationURL({
  // Use the linkedin client name in the Instant dashboard auth tab
  clientName: 'REPLACE_ME',
  redirectURL: window.location.href,
});

import React from 'react';

export default function App() {
  return (
    <>
      <db.SignedIn>
        <UserInfo />
      </db.SignedIn>
      <db.SignedOut>
        <Login />
      </db.SignedOut>
    </>
  );
}

function UserInfo() {
  const user = db.useUser();
  return <h1>Hello {user.email}!</h1>;
}

function Login() {
  return <a href={url}>Log in with LinkedIn</a>;
}
```

When your users clicks on the link, they'll be redirected to LinkedIn to start the OAuth flow and then back to your site.

Instant will automatically log them in to your app when they are redirected!





**Method: Expo Web Auth**

Instant comes with support for Expo's AuthSession library. To use it, you need to:

1. Set up AuthSession
2. Register your app with Instant
3. Use AuthSession to log in with LinkedIn!

Let's do that.

**Set up AuthSession**

If you haven't already, follow the AuthSession [installation instructions](https://docs.expo.dev/versions/latest/sdk/auth-session/) from the Expo docs.

Next, add the following dependencies:

```shell 
npx expo install expo-auth-session expo-crypto
```

Update your app.json with your scheme:

```json 
{
  "expo": {
    "scheme": "mycoolredirect"
  }
}
```

**Register your app with Instant**

Now that you have your App Scheme, it's time to tell Instant about it. For development with expo, add `exp://` and your scheme (e.g. `mycoolredirect://`) as redirect origins.



**From the dashboard**


From the [Auth](/dash?s=main&t=auth) tab on the Instant dashboard, add a redirect origin of type "App scheme".





**From the terminal**


```shell
npx instant-cli@latest auth origin add --type custom-scheme --scheme exp://
npx instant-cli@latest auth origin add --type custom-scheme --scheme mycoolredirect://
```





**Use AuthSession to log in with LinkedIn!**

And from here you're ready to add a login button to your expo app! Here's a full example

```jsx 
import { View, Text, Button, StyleSheet } from 'react-native';
import { init } from '@instantdb/react-native';
import {
  makeRedirectUri,
  useAuthRequest,
  useAutoDiscovery,
} from 'expo-auth-session';

const APP_ID = '__APP_ID__';
const db = init({ appId: APP_ID });

function App() {
  return (
    <>
      <db.SignedIn>
        <UserInfo />
      </db.SignedIn>
      <db.SignedOut>
        <Login />
      </db.SignedOut>
    </>
  );
}

function UserInfo() {
  const user = db.useUser();
  return <Text>Hello {user.email}!</Text>;
}

function Login() {
  const discovery = useAutoDiscovery(db.auth.issuerURI());
  const [request, _response, promptAsync] = useAuthRequest(
    {
      // The unique name you gave the OAuth client when you
      // registered it on the Instant dashboard
      clientId: 'YOUR_INSTANT_AUTH_CLIENT_NAME',
      redirectUri: makeRedirectUri(),
    },
    discovery,
  );

  return (
    <Button
      title="Log in"
      disabled={!request}
      onPress={async () => {
        try {
          const res = await promptAsync();
          if (res.type === 'error') {
            alert(res.error || 'Something went wrong');
          }
          if (res.type === 'success') {
            await db.auth
              .exchangeOAuthCode({
                code: res.params.code,
                codeVerifier: request.codeVerifier,
              })
              .catch((e) => alert(e.body?.message || 'Something went wrong'));
          } else {
          }
        } catch (e) {
          console.error(e);
        }
      }}
    ></Button>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;
```