{"id":4348,"date":"2022-07-05T20:25:29","date_gmt":"2022-07-05T20:25:29","guid":{"rendered":"https:\/\/codevoweb.com\/?p=4348"},"modified":"2023-05-23T12:14:01","modified_gmt":"2023-05-23T12:14:01","slug":"fullstack-app-trpc-reactjs-nodejs-jwt-authentication","status":"publish","type":"post","link":"https:\/\/codevoweb.com\/fullstack-app-trpc-reactjs-nodejs-jwt-authentication\/","title":{"rendered":"Full-Stack App tRPC, React.js, & Node.js: JWT Authentication"},"content":{"rendered":"\n

tRPC<\/a> is a toolkit that allows developers to statically type their API endpoints and share those types between the client and server, without installing extra libraries for code generation.<\/p>\n\n\n\n

When we build full-stack applications with TypeScript, it becomes difficult to share types between the frontend and the backend.<\/p>\n\n\n\n

Currently, GraphQL is the dominant library used to build and consume fully typesafe APIs in TypeScript. It offers a radically new approach to building type-safety APIs with more flexibility and control.<\/p>\n\n\n\n

However, since GraphQL is a query language, it doesn’t leverage the full power of TypeScript and depends on code generation and already-defined schemas to implement typesafe APIs.<\/p>\n\n\n\n

This is where tRPC<\/a> was introduced to solve the complexities and flaws of GraphQL. tRPC allows us to build full-stack TypeScript applications and share the types directly between the client and server.<\/p>\n\n\n\n

In this article, you’ll learn how to add JWT Authentication to your React.js, TypeScript, tRPC<\/a> Client, tailwindCss and React Query projects.<\/p>\n\n\n\n

tRPC Client and Server with React.js, Express, and Node.js Series:<\/p>\n\n\n\n

    \n
  1. Build tRPC API with React.js, Node.js & MongoDB: Project Setup<\/a><\/li>\n\n\n\n
  2. Build tRPC API with React.js & Node.js: Access and Refresh Tokens<\/a><\/li>\n\n\n\n
  3. Full-Stack App tRPC, React.js, & Node.js: JWT Authentication<\/a><\/li>\n<\/ol>\n\n\n\n

    More practice:<\/p>\n\n\n\n