Authorization with Instagram returns "invalid redirect_uri"

[Gianluska]

Environment

System:
OS: Windows 10 10.0.22000
CPU: (6) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
Memory: 8.96 GB / 15.93 GB
Binaries:
Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 9.3.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22000.120.0), Chromium (111.0.1661.51)
Internet Explorer: 11.0.22000.120

Reproduction URL

https://instagram-login-kohl.vercel.app/

Describe the issue

When i try to authorize a feed using NextAuth Instagram provider, i got the error: "Invalid redirect_uri".

I registered the url "https://instagram-login-kohl.vercel.app/" on my instagram "Valid OAuth Redirect URIs" option on Meta for Developers.

My app is current with "Live" option enabled.

How to reproduce

[...nextauth].ts

  import InstagramProvider from "next-auth/providers/instagram";
  import NextAuth from "next-auth";
  
  export default NextAuth({
    providers: [
      InstagramProvider({
        clientId: process.env.INSTAGRAM_CLIENT_ID,
        clientSecret: process.env.INSTAGRAM_CLIENT_SECRET,
      }),
    ],
    secret: process.env.SECRET,
  });

---

index.tsx

import { signIn } from "next-auth/react";

export default function Home() {
  return (
    <div>
      <button onClick={() => signIn("instagram")}>instagram</button>
    </div>
  );
}

Expected behavior

Authorization works, going back to my redirect_uri successfuly

[Gr33nLight]

Hey did you manage to find a solution to this? Just got the same error. I'm not in "live" mode yet, just development mode.
As you did I put the main address for my app, which is currently just an ngrok site pointing to its root page. I'm not sure if the redirect url should contain /api/auth or something?

[Hophoet]

i have the same issue, I'm not in development mode. @Gr33nLight dit you find a solution for this ?
i add an SSL to my localhost with express and openssl

[ThadeusAjayi]

@Hophoet with the new Instagram apis and next-auth v5, you have to do these;

 Instagram({
      clientId: process.env.AUTH_INSTAGRAM_ID,
      clientSecret: process.env.AUTH_INSTAGRAM_SECRET,
      authorization: {
        params: {
          scope:
            "instagram_business_basic, instagram_business_manage_messages, instagram_business_content_publish, instagram_business_manage_comments",
        },
        url: "https://api.instagram.com/oauth/authorize?scope=user_profile",
      },
    })

Having done these, go to
your Meta app > Set up Instagram business login > Business login settings

add your local url or https://localhost:3000/api/auth/callback/instagram to OAuth redirect URIs

You may get an error after the above;

OperationProcessingError: "response" body "token_type" property must be a string

This is as a result of the token_type not returned in the response, a quick fix would be to add;

if (!json.token_type) {
    json.token_type = 'Bearer'
}

after line 1132 in node_modules/oauth4webapi/build/index.js

[hseghetti]

@ThadeusAjayi I have exactly what you mentioned but it returns the "invalid redirect_uri" error.

[ThadeusAjayi]

@hseghetti Do you have your app served as https on localhost ?

if not you can start your development environment with : next dev --experimental-https
Make sure you add callback uri / OAuth redirect URIs exactly as https://localhost:3000/api/auth/callback/instagram on Meta apps

[hseghetti]

@ThadeusAjayi yes, I have https (using next dev --experimental-https). And I have that exact URL in the meta app.