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?

[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.

[ifeanyi-ugwu]

i came across this discussion during a failed attempt to migrate to next-auth v5.

here is my v4 setup that works:

instagram-provider.ts

import type { OAuthConfig, OAuthUserConfig } from "next-auth/providers/oauth";

interface InstagramProfile {
  id: string;
  username: string;
  account_type?: string;
  name?: string;
}

export default function CustomInstagramProvider(
  options: OAuthUserConfig<InstagramProfile>
): OAuthConfig<InstagramProfile> {
  return {
    id: "instagram",
    name: "Instagram",
    type: "oauth",
    authorization: {
      url: "https://www.instagram.com/oauth/authorize",
      params: {
        scope:
          "instagram_business_basic,instagram_business_manage_messages,instagram_business_manage_comments,instagram_business_content_publish,instagram_business_manage_insights",
      },
    },
    token: {
      url: "https://api.instagram.com/oauth/access_token",
      async request({ client, params, provider }) {
        /**use the url if you prefer */
        const tokenUrl =
          typeof provider.token === "string"
            ? provider.token
            : provider.token?.url;

        if (!tokenUrl) throw new Error("No token URL found on provider");

        if (!params.code) {
          throw new Error("Missing authorization code in token request");
        }

        try {
          const response = await fetch(tokenUrl, {
            method: "POST",
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
            body: new URLSearchParams({
              client_id: client.client_id as string,
              client_secret: client.client_secret as string,
              grant_type: "authorization_code",
              redirect_uri: provider.callbackUrl,
              code: params.code,
            }),
          });

          const data = await response.json();

          if (data.error_type) {
            throw new Error(`Instagram OAuth error: ${data.error_message}`);
          }

          return {
            tokens: {
              access_token: data.access_token,
            },
          };
        } catch (error) {
          throw error;
        }
      },
    },
    userinfo: {
      url: "https://graph.instagram.com/me?fields=id,username",
      async request({ tokens, provider }) {
        /**use the url if you prefer */
        const userinfoUrl =
          typeof provider.userinfo === "string"
            ? provider.userinfo
            : provider.userinfo?.url;

        if (!userinfoUrl) {
          throw new Error("No userinfo URL found on provider");
        }

        const res = await fetch(userinfoUrl, {
          headers: {
            Authorization: `Bearer ${tokens.access_token}`,
          },
        });

        if (!res.ok) {
          const errorData = await res.json();
          throw new Error(
            `Instagram userinfo request failed with status ${
              res.status
            }: ${JSON.stringify(errorData)}`
          );
        }

        return await res.json();
      },
    },
    client: {
      token_endpoint_auth_method: "client_secret_post",
    },
    profile(profile) {
      return {
        id: profile.id,
        name: profile.username,
        email: null,
        image: null,
      };
    },
    style: {
      logo: "/instagram.svg",
      bg: "#fff",
      text: "#000",
    },
    options,
  };
}

then you can import and use as is (or override/customize if necessary):

import InstagramProvider from "./instagram-provider";

InstagramProvider({
    clientId: process.env.INSTAGRAM_CLIENT_ID as string,
    clientSecret: process.env.INSTAGRAM_CLIENT_SECRET as string,
}),

[Jenil45]

When I have added the ngrok https url and http://localhost:8080/api/v1/social/callback/instagram as OAuth redirect URIs in Instagram -> API Setup with Instagram Login it is redirecting to Instagram login and then to instagram profile not to Instagram account select and return to redirect uri.

Do anyone have suggestion for this issue?