Frontend Login to WordPress

[gregrickaby]

As a user, I want to log into WordPress from the frontend so that:

• I can post a comment with my account
• I can view protected content
• I can view my WooCommerce powered shopping cart

Requirements

• Create a authentication layer between the Frontend and Backend (oAuth, JWT, cookie, etc...)
• Leverage https://next-auth.js.org/ on the frontend
• Create a sign-in link/button on the frontend
  • Create a sign-in page
  • Create a sign-in form

[donmhico]

EOD 02/23

I created this branch to work on - https://github.com/donmhico/nextjs-wordpress-starter/tree/feature/233-Frontend-Login-to-WordPress - so far I was just able to create a very simple login button in login.js and only have GH enabled as Login Provider. At the very least, upon login, we successfully save the logged-in state.

I still have to do more research and thinking on how to bridge this to WP User.

[donmhico]

EOD 02/25

I was able to leverage NextJS Auth in our NextJS Starter. Basically here's the flow.

1. Visitor registers in /register.
2. NextJS Auth sends a GraphQL request in WP to create a new user.
3. WP sends back some user data including JWT Token,
4. NextJS Auth stores the user data + jwt token in session which we can get using useSession().

Note: This is still in my local. If anyone wants to test this, you can use my branch - https://github.com/donmhico/nextjs-wordpress-starter/tree/feature/233-Frontend-Login-to-WordPress. Also you need to install the plugin https://github.com/wp-graphql/wp-graphql-jwt-authentication in your backend WP.

TODO

1. Update https://github.com/WebDevStudios/nextjs-starter-wordpress to include https://github.com/wp-graphql/wp-graphql-jwt-authentication plugin.
2. Create a very simple protected /profile page which shows basic user info.
3. Deploy to https://nextjs-wordpress-starter.vercel.app

[donmhico]

EOD 02/26

1. Created /login.
2. Created a very simple /profile which displays user info when logged.
3. Created Feature/233 frontend login to WordPress #246 and tried to deploy a preview in vercel.
4. Merged Add WP GraphQL JWT Authentication plugin wds-headless-wordpress#9 which installs WP GraphQL JWT Authentication plugin in WP Backend.

It's my first time deploying to vercel so i'm encountering some hurdles but I should be able to have a preview deployment working properly soon.

[donmhico]

EOD 03/03

1. Merged 2ea4959 in feature/233. NextJS Auth is now working in Vercel.
2. Started to look into how to integrate session with Apollo but i'm getting Hook Rules error when trying to place useSession() inside initializeApollo(). I'll try to look more into this but my next approach is to try and use useSession() in _app.js and try to see how I can pass it in the Apollo client from there.

[donmhico]

EOD 03/05

1. Seems like we can override the Headers option of the Apollo client by adding it as context property inside .query() and possibly .mutate() - https://www.apollographql.com/docs/react/networking/advanced-http-networking/#overriding-options
2. While working on this, I also stumbled the problem where the expiry of session in NextJS Auth is not the same as the expiry of the authToken provided by WP GraphQL JWT (from WP). So the logic to properly handle token expiry on both as well as refreshToken request still needed to be done.

[donmhico]

EOD 03/09

I was able to work on this a little bit and I believe I was able to create the logic for handling expired JWT Auth token and requesting a new one using the refresh token.

My next action would be integrating this Auth Token to in Apollo client (see #1 on my EOD above).

[donmhico]

EOD 03/10

I stumbled upon an issue with the response we received in our GraphQL request when fetching Post comments. The issue is for some reason we are getting node: null in author: { __typename: 'CommentToCommenterConnectionEdge', node: null }. The node should include the name of the commenter.

The weird thing is that when I tried to perform the same query via GraphQL IDE in WP backend, I'm getting the expected result.

Note

The problematic comment is submitted via a logged-in (frontend) user. The comment is submitted using the mutation here - https://github.com/WebDevStudios/nextjs-wordpress-starter/blob/main/lib/wordpress/comments/mutationCommentToPost.js

And I included the JWT Token via this code.

apolloClient
    .mutate({
      mutation: mutationCommentToPost,
      variables: {
        postId,
        content
      },
      context: {
        headers: {
          authorization: `Bearer ${token}`
        }
      }
    })

Screenshot of Response Comments (object) Log

Screenshot of GraphQL IDE

Screenshot of how the comment looks like in WP Dashboard

I'm gonna have to dig deeper as to why this is happening because looking in the backend, it looks like the comment was properly sent.

[donmhico]

EOD 03/11

The issue I mentioned above is happening due to the User object not being visible to public. I've created this branch in WP side (https://github.com/WebDevStudios/nextjs-starter-wordpress/tree/feature/make-users-visible-to-public) that should address this issue.

It still needs more testing.

[ravewebdev]

EOD 3/24

• Tested/refactored login/register/logout process, got it up and running on dev.
• Added formDefaults to comment, login, register forms to avoid errors on FE.
• Updated profile name display to avoid null null in name if not set.

[ravewebdev]

EOD 3/25

• Refactored post comment process to use FE layer
• Tweaked error messaging/handling
• Removed extraneous files/references
• Reverted WP URL env var to non-public