NextJS, RTK-Q, JS, JWT Auth, redux-persist

[tonydattolo]

Hey guys,

Last semester my team and I put together a Twitter clone and figured out a lot of stuff I think beginners commonly mention struggling with. For example, implementing JWT auth without next-auth and using just endpoints from a django rest framework backend. Implementing a store that includes redux persist in JS and not TS -- didn't see many examples of that it took some fiddling to figure out.

I'd like to share this work with the community. It uses very modern tooling and as such was the developer experience was just incredible. We used tags on stuff like a traditional social media feed for that instant feedback after invalidating, we used persist functions, we used name spacing to have multiple RTK-Q lazy hooks in one component where needed, we used conditional rendering with all the RTK-Q response cases.

Let me know what ya think, here is the link. We'd also love feedback on stuff we could've done better. We are currently integrating next-auth WITH our existing JWT endpoints from the backend to maintain control over our user model there. So that may help as well as something I see beginners asking about a lot.

https://github.com/tonydattolo/TwitterClone

Note: the JWT refresh logic is currently bugged, but NextJS 12 introduces edge functions, which for our purposes allows this edge function middleware to just be wrapped around whatever pages we want. So in NextJS this would be as easy as splitting the pages directory into two sets, auth/not auth. No more protected routes or wrapper/embedded components, just a slick middleware file to handle that refresh conditional.

Note: you could make this more secure using http-onlyCookies which is actually really easy in NextJS because you can utilize their existing Api folder to make the calls so that they're not vulnerable to xss attacks. We didn't do this because we ran out of time, BUT Bryan Dunn had shown how to do this on his excellent YouTube playlist here, https://youtube.com/playlist?list=PLJRGQoqpRwddLqVtViDg4IILOTry1VjjP