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.

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

#2. Connect your OAuth client to Instant

Add your OAuth Client on Instant

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.

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:

'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 click 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!