Add a Custom OAuth2/OpenID Connect Provider to Strapi v4

1

This article will cover the required steps to add a custom OAuth2/OpenID Connect provider to Strapi v4.

This is a companion discussion topic for the original entry at https://strapi.io/blog/how-to-add-a-custom-o-auth2-open-id-connect-provider-to-strapi-v4
2

Hi, thanks a lot for the article @ChristopheCVB!

I was reading it and I found a few typos, is there a way I can fix them for you so that they reflect on the Strapi Blog?

Thanks for your advice!

4

The Strapi custom provider is unavailable and not shown in the providers list when dockerized.

5

I have to say this is extremely overly engineered and terrible practice. There has to be a better way to add a custom provider to Strapi.

I love the platform and use it constantly, but this is one of the ugliest authentication implementations I’ve seen.

Please tell me there is a better option than editing code in the node_modules folder. Ive spent 8 hours trying to get a custom provider running before finding this. If this is the solution, its a deal breaker.

1 Like
6

Can’t agree with you more! But I believe the elegant way you want is in the Enterprise plan, which is not free. So as ugly as it is, at least it’s free!

1 Like
7

True, but I found a way to override the default behavior and allow new providers without modifications to core code. I see why no one is eager to help with that issue though.

1 Like
8

Can you share how?

9

I have successfully authenticated with the custom provider, in my case it is Autodesk. I followed the above documentation and followed additional steps for integration.

  1. Add postinstall script to package.json : In your package.json file, add the "postinstall": "patch-package" script. This script ensures that patch-package is run automatically after npm installs your dependencies.
  2. Install Dependencies and Patch Changes : After adding the postinstall script, run npm install to install the dependencies and automatically patch any changes using patch-package.
  3. Update Frontend URL Rewrite : Ensure that your frontend makes requests to the appropriate endpoint for the custom provider. In my case, it’s important to call http://localhost:1337/api/connect/autodesk for the Autodesk provider.
  4. Ensure that the custom provider’s GET request in providers-registry.js
    matches the provider documentation’s routes.