tomashco / payload-instagram-plugin

This plugin allows you to use an instagram connected feed as content to be shown inside payload blog.
https://www.npmjs.com/package/payload-instagram-plugin
MIT License
5 stars 1 forks source link

Idea: adding possibility to use registered application and user to self authenticate #2

Open KennyAtCodin opened 2 months ago

KennyAtCodin commented 2 months ago

I would suggest that we extend the logic of this plugin to also be usable in multitenant applications or applications where creating a test-user is not feasible.

I would love to assist in developing this feature :)

tomashco commented 2 months ago

Hi @KennyAtCodin, can I ask you how you would use the plugin in multitenant applications? Regarding the creation of a test user on the facebook app, as for now I think is the only feasable way that actually allows you to receive the authorization to retrieve the code and subsequently the token from facebook. Do you see any foreseeable way to do it?

thank you!

KennyAtCodin commented 2 months ago

HI @tomashco: I think the authorization flow can be achieved with extending the current collection and adding a UI button that starts the authorization process (redirecting to the login page for IG). As for the rest, everyone that wants to use this flow needs to register an application and let this approve by meta. So we would need to be able to configure everything app related. I think the only difference would be how we enter the access token, currently it's a “static” input, with my idea it would be started via a button click and filled with the response from the authorization flow.

As soon I have some spare time, I'll try to implement a demo and PR it.

Also for the multitenancy feature: I would store each long-lived access token for every tenant [tenant][token] in the database. With the refresh logic, I think it should also work.

tomashco commented 2 months ago

Yes regarding the flow, I agree with you it seems something that can be accomplished (for now I just wanted to have a minimal integration that works, so I didn't pay attention to this feature but it's definitely a useful thing in order to streamline the use of the plugin). If you start a new branch I can help you work on it.

as for the refresh token, the new logic actually store the token in the database (no need to add it as an environment variable) and is refreshed automatically after 10 days so in a multitenancy setup I think it should continue working like this.

tomashco commented 2 months ago

Hi @KennyAtCodin, I've been working on this feature and I implemented the flow discussed above. I've published version: 0.1.0-beta.1 in case you want to test it. I've also updated the documentation. Code is already on main branch.

It would be great if you could give some feedback

thank you! Tom

KennyAtCodin commented 2 months ago

@tomashco I just tried starting a fresh payload instance with the plugin, unfortunately this does not work with the newest 3.0.0-beta.59: Module not found: Can't resolve '@payloadcms/ui/templates/Default' 1 | 'use server'; 2 | import React from 'react'; 3 | import { DefaultTemplate } from '@payloadcms/ui/templates/Default'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 4 | import InstagramPostsClient from '../../components/InstagramPostsClient'; 5 | const CustomDefaultView = ({ initPageResult, params, searchParams }) => { 6 | return (React.createElement(DefaultTemplate, { payload: initPageResult.req.payload, config: initPageResult.req.payload.config, i18n: initPageResult.req.i18n, visibleEntities: initPageResult.visibleEntities },

Also I get a ton of unmeet peer dependency (because of react 19) but I'm not sure if this is the problem for the plugin not to work

tomashco commented 2 months ago

Hi @KennyAtCodin I just published a new package v0.1.0-beta.2 in which I've updated all the dependencies to the latest payload beta release which is v3.0.0-beta.61. I tested the flow with the dev payload into the repo and it is working as intended, can you try again?

thank you, Tommaso

KennyAtCodin commented 2 months ago

It starts now. New Issues: The app instantly throws errors (Error refreshing token)

And where would I need to configure the application? I suppose: instagramPlugin({ enabled: true }), is not all I need to do? Could you please provide some more documentation on that?

//EDIT 1: found the settings page, i think due to the amount of "refresh token errors" my local admin panel just lags to much that i didn't see it before

//EDIT2: Unfortunately it doesnt work, after clicking configure Instagram plugin i receive an error: {"message":"Error refreshing token"} response : /api/instagram/authorize?code=XXXXXXXX actual code removed

Generally, I think the client ID and client secret should be configured via environment variable and there should be some kind of check if a refresh should even be performed. No token - no refresh

KennyAtCodin commented 2 months ago

As soon as Paylod 3 becomes stable and multi tenancy is possible in general, I will try to upgrade your plugin so that it works smoothly for multi tenant applications, I think that is where we will have the biggest impact.