instant

Pick your app

The examples below will be updated with your app ID.

Authentication and Permissions

LinkedIn OAuth

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?

Building for React Native?

#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 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:
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

Go to the Instant dashboard and select the Auth tab for your app.

Add your Oauth Client on Instant

  • Click "Set up LinkedIn"
  • Enter your "Client ID"
  • Enter your "Client Secret"
  • Click "Add Client"

And voila, you are connected!

#3. Add some code!

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 from the Expo docs.

Next, add the following dependencies:

npx expo install expo-auth-session expo-crypto

Update your app.json with your scheme:

{
  "expo": {
    "scheme": "mycoolredirect"
  }
}

Register your app with Instant

Now that you have you App Scheme, it's time to tell Instant about it.

From the Auth tab on the Instant dashboard, add a redirect origin of type "App scheme". For development with expo add exp:// and your scheme, e.g. 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

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;
Next
Clerk