Instagram: Grant: missing session or misconfigured provider

[baptisteArno]

Bug report

When logging in with Instagram, it redirects to the backend URL with the error code: Grant: missing session or misconfigured provider

Describe the bug

I'm testing Instagram login on my localhost using ngrok.

It succesfully calls the /connect/instagram/callback route but then redirects with the error Grant: missing session or misconfigured provider

[2021-01-23T08:11:48.074Z] debug GET /connect/instagram (16 ms) 302
[2021-01-23T08:12:22.352Z] debug GET /connect/instagram/callback?code=AQAfssCJ9EA2jZk0zLKgxCJc_Ov77OjoeIhyn8CvMjcii1Mes61qxRrADHOkrjdbmnfrT9EmhTQNOVIHdb0WdzHr38BoZ3paoP1JGAzqjWVUjCxHeNlMCDlnpaQ3ERrD3G6EdYjq3V_St-rVW4f6vayV4AODziFY8JDevAxXsJAWb5Ov11JIe3145-mYUHhrKF6v-i_V20iKtHQEzdAyw9qUS7kBPp1oFBmQ-ekKIvkkgw (19 ms) 302
[2021-01-23T08:12:22.573Z] debug GET index.html (10 ms) 200
[2021-01-23T08:12:22.853Z] debug GET /assets/images/logo_login.png (2 ms) 200

Here is my grant confing from core_store:

{
  "instagram": {
    "enabled": true,
    "icon": "instagram",
    "key": "<MY_KEY>",
    "secret": "<MY_SECRET>",
    "callback": "https://localhost:3000/connect/instagram/redirect",
    "scope": ["user_profile"],
    "redirectUri": "https://45b9e6cb7ea2.ngrok.io/connect/instagram/callback"
  }
}

I checked all this:

• Make sure you have set the backend url in config/server.js
• A session/cookie/cache problem: You can try again in a private tab.
• The incorrect use of a domain with ngrok: Check your urls and make sure that you use the ngrok url instead of http://localhost:1337. Don't forget to check the backend url set in the example app at src/config.js.

Steps to reproduce the behavior

1. Follow the official procedure
2. Call STRAPI_BASE_URL/connect/instagram

System

• Node.js version: 14.9
• NPM version: 6.14.7
• Strapi version: 3.4.4
• Database: PostgreSQL
• Operating system: MacOS 11.2

[alexandrebodin]

Hi @baptisteArno Have you followed the migration guide on when updating to 3.4.4 ?
https://strapi.io/documentation/developer-docs/latest/migration-guide/migration-guide-3.4.x-to-3.4.4.html#_2-migrate-instagram-login-config

[baptisteArno]

Hello @alexandrebodin! Yes, I followed the guide. See my config from core_store:

{
  "instagram": {
    "enabled": true,
    "icon": "instagram",
    "key": "<MY_KEY>",
    "secret": "<MY_SECRET>",
    "callback": "https://localhost:3000/connect/instagram/redirect",
    "scope": ["user_profile"],
    "redirectUri": "https://45b9e6cb7ea2.ngrok.io/connect/instagram/callback"
  }
}

[alexandrebodin]

Your config looks good to me at first sight so? some hypothesis to verify:

• You already have a user in the DB with the same email / username ?
• Your instagram app doesn't allow to get the right info & grant is complaining about it ? (verify the instagram app is configure with the right scope or that you have your account registered as a test user until the instagram app is "active"

The only diff I have with my config is the callback which I left by default /auth/instagram/callback so you might want to try it to eliminate this as an issue.

Let me know if any of this helps you

[baptisteArno]

Thank you for those suggestions!

• I don't have a user in DB with the same email or username
• The user is well registered as a test user (otherwise I wouldn't be able to go this far in the OAuth flow)

The input field is disabled in the admin panel:

[baptisteArno]

Maybe it's worth mentioning that I tried to connect with Instagram before migrating 3.4.4 and I was the one reporting the new Instagram API. #9196

[baptisteArno]

The problem comes from proxying localhost with ngrok. I tested on prod env, it works well. I guess we can close this issue as it's not critical and maybe it's an invalid configuration from my side.