How to add linkedin auth to nextjs supabase project

Question

I am trying to follow this tutorial.

I am trying to add LinkedIn oauth instead of github. I have seen this documentation and have been attempting to follow its instructions.

I have a sign in component with:

'use client' import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";

export default function AuthButton() {
    const supabase = createClientComponentClient();
    
    const handleSignIn = async () => {
        await supabase.auth.signInWithOAuth({
            provider: 'linkedin',
            // options: {
            //     redirectTo: 'http://localhost:3000/auth/callback'
            // }
        }); // <-- Added closing parenthesis
    };
     
    return (
        <button onClick={handleSignIn}>Sign in</button>
    );
}

In my .env file, I have saved both the secret and client ids. I have also added both of them to my supabase provider file.

When I try to run this, and click the sign in button, I get a linkedin page that says:

Bummer, something went wrong. In five seconds, you will be redirected to: thisstringisthecallbackfromsupabase.supabase.co

How can i figure out how to debug this error?

In the console, whilst the error page is loaded, I can see these errors:

Uncaught ReferenceError: require is not defined Uncaught Error: TrackingTwo requires an initialPageInstance POST https://api.linkedin.com/li/track 404 (Not Found)

I am certain that I have correctly copied and pasted the id and secret keys from linkedin to supabase.

I signed up to a propeller auth account to try and see if i could get linkedin oauth to work through that service. It generates an error message that says:

Query deserialize error: missing field code

Does anyone know how to get linkedin outh to work - either natively or through one of the user management platforms?

score 0 · Answer 1 · answered Aug 27 '23 at 17:24

To add LinkedIn authentication to your Next.js Supabase project, you need to create a LinkedIn OAuth application and add the application credentials to your Supabase dashboard.

Here are the steps you can follow:

Create a LinkedIn project and app on the LinkedIn Developer Dashboard.

https://supabase.com/docs/guides/auth/social-login/auth-linkedin
Retrieve your project’s URL and anon key from your API settings, and create a .env.local file with the following environment variables:
```
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key 
```
Install the Next.js Auth Helpers library by running the following command:
```
npm install @supabase/auth-helpers-nextjs @supabase/supabase-js 
```
Add the LinkedIn login code to your Supabase JS client app by following the instructions in the link:

https://supabase.com/docs/guides/auth/social-login/auth-linkedin
Use middleware to refresh the user’s session before loading Server Component routes. You can follow the given link:

https://supabase.com/docs/guides/auth/auth-helpers/nextjs

How to add linkedin auth to nextjs supabase project

1 Answers1