- Learn basic of OAuth https://authjs.dev/concepts/oauth
- Publish a series of blog posts about how OAuth works.
- Learn basics of Auth Js and implement it in a static page with a netlify route locally. ( A project similar to tina-cloud-starter-self-hosted-netlify-functions )
Two popular libraries to support OAuth are simple-oauth2 and Auth.js First try with simple-oauth2 , the example project below can be modified to be used with a different oAuth provider. https://github.com/netlify-labs/intercom-netlify-oauth/blob/master/package.js
I have cloned this project and also created Google Oauth client and secret. Present in my personal code folder. We might need to update this project to use netlify cli instead of netlify lambda. - Then try with express auth example. The benefit with auth-express (Auth.js) is that it also implements email-confirmation and magic link etc. https://github.com/nextauthjs/express-auth-example/tree/main We were not able to do the google login, maybe the client id was removed in google. Guide to deploy express app on netlify https://docs.netlify.com/frameworks/express/
- How to repurpose the express auth example for our blog.
https://chat.openai.com/share/346ff565-4c61-4e93-b415-2ac8baffa2c8
It should be easy to setup login , the tricky part is rendering “personal pages” only to authenticated users.
Check this chat with chatgpt : https://chat.openai.com/c/e6038eb2-e255-4b63-9970-35db4fa984ee
Also check this: https://www.netlify.com/blog/2021/08/12/how-to-include-files-in-netlify-serverless-functions/
Steps:
1. Add authors as a collection , AuthorName , description.etc.
2. Update the personal page in jekyll , so that it always refers to author.
3. Make sure , the website is working ( including links and page generation for each author (/user ) )
4. Read the blog and chat to render the personal pages through express app.
Here is how an hmac link/digest can be generated based on input email
https://chat.openai.com/c/a76f5d46-b9fd-4d91-985f-28dfc1acf6ee
In the above chat , i then tried to figure out how to add the hmaced user id to url for all personal pages
1) Basically there are following personal pages
personal home page ( personal.md ), personal all categories page ( personal_categories.md ), individual personal category pages , generated using generator, personal all tags page ( this can potentially be removed ).
- Implement a commenting system with the OAuth login we just implemented ( refer to the projects that use github discussions - eg giscus , utterance , – use github discussions api to fetch and store discussions ).
- Also note that the pages-cms project doesn’t use any library to implement authentication.
- Bootstrap a basic vue project , and integrate Auth Js in it. ( Note that the pages-cms can be added to a folder within the project , and then a backend handler can be added to allow navigation to it , only for admin users.
This is a guide in motion. It will be updated , with information as i find more in it. eg. I definitely need to learn how to use github application , and let tinacms establish a connection to git. however i need to figure out how it all works and what exactly i need to learn there.
End goal:
1.
- Next move personal home page to hmaced page (we could look at the existing jekyll blog generator and update it to group posts by hmaced user id) .
Render this page ( by now we have already implemented log in)
6) Similarly other pages. (personal home page ( personal.md ), personal all categories page ( personal_categories.md ), individual personal category pages , generated using generator, personal all tags page ( this can potentially be removed ).
7) Clone the request from tina to create an author collection, and send that request from the backend when a user is logged in for the first time ( no author page exists for that user ). – A sign in callback in auth js.