I can Login into the admin ui and see a preview of a private pages (pass auth token)

[MAX-786]

Description

As an editor, I want to Login into the admin UI and see the toolbar appear so that I can be authenticated to view/edit content.

Technical Approach

Since our first approach is building an addon for volto, so setting up an addon using cookieplone which will be a good starting point , we can depend on volto to provide UI for logging in and let Plone authenticate the user (editor).

• The edit URL and view URL are two different things

Follow up

• As an integrator I can not have to load hydra.js all the time to know user has started editing #47

[djay]

@MAX-786 as discussed this needs to allow you to see private urls in the frontend after you login. so it needs to send the auth token to the frontend preview so the frontend is now logged in also

[djay]

@MAX-786 I changed the title to "I can Login into the admin ui and see a preview of a private page" because the key thing about this task is to ensure the auth token is passed to the frontend so it is accessing content as the same user so therefore can see private content that public can't see

[djay]

@MAX-786 as discussed. either we can set the cookie in the hydra.js with the token and that means we never have to login with the plone client. or else have to use a modified branch of the client code that accepts a auth token.

[MAX-786]

@djay @JeffersonBledsoe I Looked into plone/client and Voila! found this:

• When you initialize the client you CAN pass the option namely token i.e. auth_token to authorize the user. ( AFAIK this is not documented so maybe ask documentation team or make a PR to get this documented)

const client = ploneClient.initialize({apiPath: 'http://localhost:8080/Plone/', token: ''});

• So, we are going to pass this from adminUI (parent window) to the iframe window by postMessage, then we can access it by message event in the hydra.js (or whatever we may call it) and then provide it to the integrator which they can use it while initializing client.
• THen If the user is not loggedIn in adminUI, auth_token will not be passed from parent to iframe and the token would be an empty string which will give access only to the public content (handled by plone/client, so no worries). So until the user is not logged in or the hosted site is visited by guest it will only show the published content.

IG this will be feasible and proper solution to this issue. What do you guys say?

[JeffersonBledsoe]

@MAX-786 Great find! Yeah, I'd file an issue to document this feature a little better, looks it should do exactly what we need though. Only thing you'd need to make sure of is that whenever the token changes in the admin window (e.g. whenever the 12 hour bearer token expires and needs to be re-authenticated or the user logs out), that is passed down to the plone client within the frontend through the bridge.

Volto handles this currently using the login renew endpoint in the AuthToken file. Shouldn't be too hard to hook into that mechanism. For example, you could register a redux reducer that hooks into the LOGIN, LOGOUT and LOGIN_RENEW actiontypes and do the work there, or you could listen to the token value in the userSession state in the redux store and do it in React.

[stevepiercy]

• When you initialize the client you CAN pass the option namely token i.e. auth_token to authorize the user. ( AFAIK this is not documented so maybe ask documentation team or make a PR to get this documented)

Please do create an issue and PR.

As far as where to add this to the documentation, @plone/client has only its README.md and refers to Plone REST API for endpoints and Volto core documentation. I'm not sure where it would go. @djay @JeffersonBledsoe @MAX-786 I'm open to suggestions.

[MAX-786]

Please do create an issue and PR.

Yep sure, but I guess Jeff is gonna file an issue.

As far as where to add this to the documentation, @plone/client has only its README.md and refers to Plone REST API for endpoints and Volto core documentation. I'm not sure where it would go. @djay @JeffersonBledsoe @MAX-786 I'm open to suggestions.

https://6.docs.plone.org/volto/client/quick-start.html#ploneclient-entry-point

This is the place where it states about how to initiate a client, so IMHO better to add a line about the token option here because it is related with initializing the authenticated user.

[djay]

@MAX-786 no reason why you can't raise the pr.

[MAX-786]

Oh sure sure

[stevepiercy]

https://6.docs.plone.org/volto/client/quick-start.html#ploneclient-entry-point

I forgot we have that! Yes, please do.

[MAX-786]

I forgot we have that! Yes, please do.

plone/volto#6076
@stevepiercy

[MAX-786]

or you could listen to the token value in the userSession state in the redux store and do it in React.

@JeffersonBledsoe I did this and whenever the token is updated the Volto-Hydra updates the token which is being sent via postMessage.
One more thing I thought that we can fetch it from cookies in hydra.js and then pass it to the developer to use it. Please checkout Draft pull request for details.