Comments (10)
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.
from nextjs-wordpress-starter.
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 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.
from nextjs-wordpress-starter.
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.
from nextjs-wordpress-starter.
EOD 02/25
I was able to leverage NextJS Auth in our NextJS Starter. Basically here's the flow.
- Visitor registers in /register.
- NextJS Auth sends a GraphQL request in WP to create a new user.
- WP sends back some user data including JWT Token,
- 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
- Update https://github.com/WebDevStudios/nextjs-starter-wordpress to include https://github.com/wp-graphql/wp-graphql-jwt-authentication plugin.
- Create a very simple protected
/profile
page which shows basic user info. - Deploy to https://nextjs-wordpress-starter.vercel.app
from nextjs-wordpress-starter.
EOD 02/26
- Created
/login
. - Created a very simple
/profile
which displays user info when logged. - Created #246 and tried to deploy a preview in vercel.
- Merged WebDevStudios/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.
from nextjs-wordpress-starter.
EOD 03/03
- Merged 2ea4959 in
feature/233
. NextJS Auth is now working in Vercel. - Started to look into how to integrate
session
withApollo
but i'm getting Hook Rules error when trying to placeuseSession()
insideinitializeApollo()
. I'll try to look more into this but my next approach is to try and useuseSession()
in_app.js
and try to see how I can pass it in the Apollo client from there.
from nextjs-wordpress-starter.
EOD 03/05
- 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 - 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 theauthToken
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.
from nextjs-wordpress-starter.
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).
from nextjs-wordpress-starter.
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.
from nextjs-wordpress-starter.
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
from nextjs-wordpress-starter.
Related Issues (20)
- GetStaticPaths should not be fetching 10,000 nodes HOT 1
- TypeError: Cannot set properties of undefined (setting 'parent') HOT 12
- WP GraphQL Gutenberg HOT 3
- Spacer Block Error
- This is just an optimization
- (Can be my local env) but documenting the issue HOT 2
- Libraries Upgrade to React 18
- Performance Issue: Potentially making the theme useless in a production setting HOT 1
- CPT: Expected type IvIdType, found SLUG
- wp-graphql-gutenberg plugin is broken
- WDS Headless Blocks plugin breaks Gutenberg editor HOT 2
- composer json is not ownloading
- TypeError: Cannot set properties of undefined (setting 'parent') HOT 1
- Error when activating WDS plugins HOT 3
- TypeError: Cannot set properties of undefined (setting 'parent') HOT 5
- Gallery and other core gutenberg blocks broken because of 'innerBlocks'
- TypeError: validateThemeColors is not a function
- Plugins Activations & Block Display Errors HOT 1
- Node-based script required for redirection
- code 127.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nextjs-wordpress-starter.