james162861 Posts - Answer Overflow

james162861

Explore posts from servers

•Created by james162861 on 8/16/2024 in #questions

Express-Like Auth Middleware Pattern For Server Actions?

Since all server actions should be authenticated, I have sprinkled clerk's auth() function at the top of every single action's function body. This seems silly. I liked how Express allows you to apply an auth middleware to collections of routes. For instance:

const authMiddleware = (req, res, next) => {
  const authToken = req.headers['authorization'];
  
  if (!authToken) {
    return res.status(401).json({ error: 'No authorization token provided' });
  }

  const user = users.find(u => u.token === authToken);
  
  if (!user) {
    return res.status(401).json({ error: 'Invalid authorization token' });
  }

  // Attach the user to the request object for use in the route handler
  req.user = user;
  next();
};

// Protected route
app.get('/protected', authMiddleware, (req, res) => {
  res.send('<h1>Protected Data</h1>');
});

const authMiddleware = (req, res, next) => {
  const authToken = req.headers['authorization'];
  
  if (!authToken) {
    return res.status(401).json({ error: 'No authorization token provided' });
  }

  const user = users.find(u => u.token === authToken);
  
  if (!user) {
    return res.status(401).json({ error: 'Invalid authorization token' });
  }

  // Attach the user to the request object for use in the route handler
  req.user = user;
  next();
};

// Protected route
app.get('/protected', authMiddleware, (req, res) => {
  res.send('<h1>Protected Data</h1>');
});

One possible solution is to extract the auth into a wrapper function and wrap each server action with it. Still a alot of repetition. Another solution could be to export the protected server actions to an index file and wrap that the withAuth wrapper function. Are there any other patters? I love server actions, but am missing traditional auth middleware.

11 replies

TTCTheo's Typesafe Cult

•Created by james162861 on 1/31/2024 in #questions

Call post.hello on button click

Hi, I know that trpc is using React useQuery under the hood in T3 on the client and therefore can only be used in a React component body. But, I am wondering if there is a way to modify the router call a trpc procedure on a button click in a client component.

import { api } from "~/trpc/react";
...
 const handleHello = async () => {
     const hello = await api.post.hello.query({ text: "from tRPC" });

  };
....
<button onClick={handleHello}>Hello</button>

import { api } from "~/trpc/react";
...
 const handleHello = async () => {
     const hello = await api.post.hello.query({ text: "from tRPC" });

  };
....
<button onClick={handleHello}>Hello</button>

I realize that I can make a fetch request to http://localhost:3000/api/trpc/post.test, but this defeats the point of TRPC.

7 replies

Gaming

Programming