There’s so much going on in the AI space, and it’s hard to focus on what truly matters. AI tools, platforms, and frameworks are popping up every day like JavaScript frameworks used to be. So I’ll try to keep track with an article every month.

Cline

Vibe code platforms are cool, but they have their limits. They can take you from zero to MVP in minutes. Once you realise that vibe coding is no longer reliable to take your project further, or don’t want to spend anymore $$$, you have to take matters into your own hands.

That’s why I prefer Agent-driven development over vibe-coding, and that’s exactly what Cline is for.

Cline lets you define a project brief, tech stack, system patterns (code style, best practices, etc), and so much more in a dedicated folder called “Memory bank”. The best thing about the memory bank is that it works with any LLM, so you are not forced to use Cline. Switch between different LLMs without writing dedicated rules for each.

Not only this, you can automate different parts of your dev process with Cline workflows. For example, every time you implement a new feature, you have to go through different steps: 1. commit changes, 2. push to github 3. create a release, 4. build & submit to app store, 5. update your to-do list, etc. You can automate all this by defining a single .mdfile and triggering it with /your-workflow.md . So you don’t have to remember multiple commands.

There’s a lot more. Checkout their docs.

Kestra

Ever wanted to build AI agents to automate your workflows or just do some cool stuff? You can do so with Kestra without writing a single line of code.

While Kestra is not an “AI Tool”, you can use their orchestration workflows to build powerful AI agents. I built a research agent that takes a topic -> searches the web -> divides tasks to several sub-agents -> gives me a clean research brief and updates my Supabase database after each step. All without touching the code. You can check it out here.

Coderabbit

Code reviews are one of the most time-consuming, energy-draining tasks in software engineering. Now with AI s̶l̶o̶p̶ generated code, it’s harder than ever.

Coderabbit reviews your code, flags harmful code, suggests changes, creates summaries, and even generates nice sequence diagrams like below.

Vibe Coding

Vibe coding is no longer what it used to be. I’m genuinely shocked when I first tried Google AI Studio. I literally built a tiny AI game in a few minutes.

I thought it couldn’t get any better, then I tried Rork. I built an entire mobile app in a few hours with Expo + React Native, including backend, payments, db, and even published to App Store Testflight.

It’s truly mind-blowing how far we have come from AI tab completions to building apps in a few minutes.

Don’t sleep on AI and follow me to stay updated. Onwards & upwards 🚀.

Published from Publish Studio

AI is an infinity stone. Learn to use its power, you can do wonders. In this guide, build a personal accountant with DeepSeek API and a sample project.

The Project

I’ve created a sample project called “Finance Tracker” for this tutorial. It lets you record your financial transactions. The front end is built with NextJs and the back end is with tRPC (express adapter) and Postgres database with drizzle ORM. But you don’t need to know tRPC to continue with this tutorial. (In case you want to learn tRPC, check out Build a Full-Stack App with tRPC and Next.js App Router series.)

Github repo: https://github.com/itsrakeshhq/finance-tracker

Let’s add a chatbot to the product that acts as our personal accountant.

Backend

Getting DeepSeek API key

As you might already know, DeepSeek went pretty viral when it was launched because of comparable performance to OpenAI yet only a fraction of the cost. This resulted in massive downtimes since its launch. I’ve been trying to use their API for a long time but no luck. (If you can get it, then please continue with it.)

So instead of using API from the DeepSeek API platform directly, we can use it from OpenRouter. OpenRouter gives access to various AI models from various providers. So if one provider goes down, it switches to another one.

API Integration

Put the API key you got from above in backend/.env:

DEEPSEEK_API_KEY=your_deepseek_api_key

Since DeepSeek API is compatible with OpenAI SDK, let’s install that:

yarn add openai

Create src/modules/ai/ai.controller.ts. This is where will write AI accountant code. First, create OpenAI client:

export default class AiController {
  private readonly openai: OpenAI;

  constructor() {
    this.openai = new OpenAI({
      // baseURL: "https://api.deepseek.com" // if using DeepSeek API key
      baseURL: "https://openrouter.ai/api/v1",
      apiKey: process.env.DEEPSEEK_API_KEY,
    });
  }
}

Here we’ve initialized Openai client.

Note: Make sure to use appropriate baseURL and apiKey based on what you are using - DeepSeek or OpenRouter.

Here’s how I designed the accountant:

1. Fetch transactions from DB.
2. Include in the prompt.
3. Answer user queries based on transactions.
4. Stream response.

...
  async accountant(req: Request, res: Response) {
    try {
      const { query } = req.body;

      if (!query) {
        return res.status(400).json({ error: "Query is required" });
      }

      const userId = req.user.id;

      const data = await db
        .select()
        .from(transactions)
        .where(eq(transactions.userId, userId));

      if (data.length === 0) {
        return res.status(400).json({ error: "No transactions found" });
      }

      const formattedTxns = data.map((txn) => ({
        amount: txn.amount,
        txnType: txn.txnType,
        summary: txn.summary,
        tag: txn.tag,
        date: txn.createdAt,
      }));

      const prompt = `
    You are a personal accountant. You are given a list of transactions. You need to answer user query based on the transactions. 

    YOU MUST KEEP THESE POINTS IN MIND WHILE ANSWERING THE USER QUERY:
    1. You must give straight forward answer.
    2. Answer like you are talking to the user. 
    3. You must not output your thinking process and reasoning. This is very important.
    4. Answer should be in markdown format.

    Transactions: ${JSON.stringify(formattedTxns)}
    Currency: $ (USD)

    User Query: ${query}
    `;

      const response = await this.openai.chat.completions.create({
        model: "deepseek/deepseek-chat",
        messages: [{ role: "user", content: prompt }],
        stream: true,
      });

      res.writeHead(200, {
        "Content-Type": "text/plain",
        "transfer-encoding": "chunked",
      });

      for await (const chunk of response) {
        if (chunk.choices[0].finish_reason === "stop") {
          break;
        }

        res.write(chunk.choices[0].delta.content || "");
      }

      res.end();
    } catch (error) {
      console.error({ error });
      if (!res.headersSent) {
        res.status(500).json({ error: "Internal server error" });
      }
    }
  }
...

Note: This is just to give an idea. In real projects it’s not ideal to fetch all transactions from db for every query. To provide context to AI models, you can create embeddings. DeepSeek currently does not support embeddings.

As you can see all we did was write a prompt and provide as much context as possible to get accurate results. Then we are sending the response as a stream instead of waiting for the whole response which might take a lot of time.

And then expose this controller in a route:

// src/index.ts

...
app.use(express.json());
app.post("/ai", authMiddleware, (req, res) =>
  new AiController().accountant(req, res)
);
...

authMiddleware protects the endpoint, so only logged-in users can access it. You can find the implementation in src/middleware/auth-middleware.ts.

That’s all we need from the backend.

Frontend

In the front end, let’s create a chat widget. Switch to frontend/ folder.

Create chat.tsx in src/components/modules/dashboard.

Chat UI

Then create a chat box UI with shadcn popover component.

// chat.tsx

export default function Chat() {
  const [conversation, setConversation] = useState<
    {
      role: "user" | "assistant";
      content: string;
    }[]
  >([
    {
      role: "assistant",
      content: "Hello, how can I help you today?",
    },
  ]);
  const [liveResponse, setLiveResponse] = useState<string>("");
  const [isThinking, setIsThinking] = useState<boolean>(false);
  
  // Auto scroll to bottom when new message is added
  const scrollRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollIntoView({ behavior: "smooth" });
    }
  }, [conversation, liveResponse]);
  
  return (
	  <Popover>
      <PopoverTrigger className="absolute right-4 bottom-4" asChild>
        <Button size={"icon"} className="rounded-full">
          <BotMessageSquareIcon className="w-4 h-4" />
        </Button>
      </PopoverTrigger>
      <PopoverContent align="end" className="w-[500px] h-[600px] p-0 space-y-4">
        <h1 className="text-xl font-bold text-center p-4 pb-0">
          Personal Accountant
        </h1>
        <hr />
        <div className="pt-0 relative h-full">
          <div className="flex flex-col gap-2 h-[calc(100%-150px)] overflow-y-auto px-4 pb-20">
            {conversation.map((message, index) => (
              <div
                key={index}
                className={cn("flex flex-row gap-2 items-start", {
                  "rounded-lg bg-muted p-2 ml-auto flex-row-reverse":
                    message.role === "user",
                })}
              >
                {message.role === "assistant" && (
                  <BotMessageSquareIcon className="w-4 h-4 shrink-0 mt-1.5" />
                )}
                {message.role === "user" && (
                  <UserRoundIcon className="w-4 h-4 shrink-0 mt-1" />
                )}
                <Markdown className="prose prose-sm prose-h1:text-xl prose-h2:text-lg prose-h3:text-base">
                  {message.content}
                </Markdown>
              </div>
            ))}
            {isThinking && (
              <div className="flex flex-row gap-2 items-center">
                <BotMessageSquareIcon className="w-4 h-4" />
                <p className="animate-pulse prose prose-sm">Thinking...</p>
              </div>
            )}
            {liveResponse.length > 0 && (
              <div className="flex flex-row gap-2 items-start">
                <BotMessageSquareIcon className="w-4 h-4 shrink-0 mt-1.5" />
                <Markdown className="prose prose-sm prose-h1:text-xl prose-h2:text-lg prose-h3:text-base">
                  {liveResponse}
                </Markdown>
              </div>
            )}
            <div ref={scrollRef} />
          </div>
          <hr />
         </div>
      </PopoverContent>
    </Popover>
  );
}

Form

Now create a form to handle user input:

const formSchema = z.object({
  message: z.string().min(1),
});

export default function Chat() {
...
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      message: "",
    },
  });
  
  ...
      <hr />
          <div className="absolute bottom-20 left-0 right-0 p-4 w-full">
            <Form {...form}>
              <form
                onSubmit={form.handleSubmit(onSubmit)}
                className="flex flex-row gap-2"
              >
                <FormField
                  control={form.control}
                  name="message"
                  render={({ field }) => (
                    <FormItem className="flex-1">
                      <FormControl>
                        <Input placeholder="Ask me anything..." {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <Button size={"icon"} type="submit">
                  <SendIcon className="w-4 h-4" />
                </Button>
              </form>
            </Form>
          </div>
    ...
...

Submit handler

Finally, implement the submit handler. As I said above, we are sending responses in stream, so it’s better if also show the response as it is coming.

...
  const onSubmit = async (data: z.infer<typeof formSchema>) => {
    setIsThinking(true);
    setConversation((prev) => [
      ...prev,
      { role: "user", content: data.message },
    ]);
    form.reset();

    let liveResponse = "";
    try {
      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/ai`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "include",
        body: JSON.stringify({
          query: data.message,
        }),
      });

      const reader = response.body?.getReader();
      const decoder = new TextDecoder();

      setIsThinking(false);
      if (!reader) return;

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        const text = decoder.decode(value, { stream: true });

        liveResponse += text;
        setLiveResponse(liveResponse);
      }

      setConversation((prev) => [
        ...prev,
        { role: "assistant", content: liveResponse },
      ]);
    } catch (error) {
      console.error(error);
    } finally {
      setIsThinking(false);
      setLiveResponse("");
    }
  };
...

Note: Make sure to set NEXT_PUBLIC_API_URL in .env.local

That’s it!

If you don’t want to deal with all this, you can also use Vercel’s AI SDK which has all the parts you need.

Feel free to ask any questions in the comments below. Follow for more 🎸🎸🎸!

Integrating DeepSeek API in NextJs and ExpressJs App was originally published in Dev Genius on Medium, where people are continuing the conversation by highlighting and responding to this story.

Published from Publish Studio

Authentication is an important part of a full-stack app. This is the only thing left before you can call yourself a full-stack developer or engineer or whatever. So, in this article, I will share how to add classic (email + password) authentication to a full-stack app using Next.js middleware for the front end and tRPC for the back end.

For the sake of learning I’m not going to use third-party auth solutions like Auth.js, Clerk, auth0, Supabase auth. But in real apps it’s better to use an auth solution because they handle everything for you and they are more secure.

This is part 3 of “Building a Full-Stack App with tRPC and Next.js” series. I recommended reading first 2 parts if you haven’t to better understand this part.

Let’s say we want to allow others to use our product Finance Tracker (GitHub repo). Before giving them access to the product, we have to do something, so they can’t access each other’s data and keep their info secure. This is where auth comes in.

To achieve this goal, we have to let them create an account in our server and verify every time someone makes a request like adding a transaction so that we add that transaction to that specific user account.

Two important terms to understand before we move on:

1. Authentication: Letting the user into the server (through login).
2. Authorization: Giving permission to the user to perform certain actions (e.g.: add transaction, view transactions).

The Concept of Access and Refresh Tokens

Access tokens, as the name implies used to access resources from server. They often set to expire within 10 minutes to 1 hour. While refresh tokens are used only to get new access token after previous one expires and they often are long-lived (mostly 7+ days).

Then why do we need refresh tokens and why not make access tokens long-lived?

The whole point of refresh tokens is to minimize the attack window. Since access tokens are sent frequently, they have higher risk of getting compromised (like man-in-the middle attacks) than refresh tokens. And as they are short-lived, they reduce damage.

But if you don’t use refresh tokens, you have to ask the user to log in again and again which is a bad user experience.

Securing Backend

Before adding auth, we have to create a user model to create accounts and create a relation with transactions.

So, open backend/src/modules and create user module and user.schema.ts file. Then create basic user schema along with zod schema for insert operation:

import { pgTable, serial, text, timestamp } from "drizzle-orm/pg-core";
import { createInsertSchema } from "drizzle-zod";

export const users = pgTable("users", {
  id: serial("id").primaryKey(),
  email: text("email").notNull().unique(),
  password: text("password").notNull(),
  createdAt: timestamp("created_at").defaultNow(),
  updatedAt: timestamp("updated_at")
    .defaultNow()
    .$onUpdate(() => new Date()),
});

export const insertUserSchema = createInsertSchema(users).omit({
  id: true,
  createdAt: true,
  updatedAt: true,
});

Next, create a relation between the transaction and the user. Since one user can have many transactions, let’s create one-to-many a relation.

In user.schema.ts:

import { relations } from "drizzle-orm";

export const usersRelations = relations(users, ({ many }) => ({
// each user can have multiple transactions
  transactions: many(transactions),
}));

In transaction.schema.ts:

export const transactions = pgTable("transactions", {
...
	userId: integer("user_id") // <--- add userId
	    .references(() => users.id, { onDelete: "cascade" }) // <--- delete transaction when referenced user is deleted
	    .notNull(), 
...
});

export const transactionsRelations = relations(transactions, ({ one }) => ({
// each transaction belongs to only one user
  user: one(users, {
    fields: [transactions.userId],
    references: [users.id],
  }),
}));

export const insertTransactionSchema = createInsertSchema(transactions).omit({
  ...
  userId: true, // <--- Remove userId from zod schema because we will get that from auth context which will be explained later
});

Now run migrations:

npx drizzle-kit push

You will get a warning (THIS ACTION WILL CAUSE DATA LOSS AND CANNOT BE REVERTED) because we are adding a required field user_id but we have some data from the previous tutorial. Since it's just a tutorial, select truncate data.

Alright, it’s time to add authentication.

First, install

1. bcryptjs - to hash password
2. jsonwebtoken - to generate access and refresh tokens
3. cookies - to store tokens in secure cookies and include them in response when logging in so they can be stored in the user's browser to keep them logged in from the client side
4. ioredis - to store the user ID and refresh token in Redis to keep users logged in from the server side and identify them later when requesting resources or new access token

yarn add bcryptjs jsonwebtoken cookies ioredis

Here’s the flow of authentication:

Why store refresh tokens in Redis? Why not just store the user and then decode the user from the refresh token?

Let’s say a user is logged in from two devices, if you only store user, you create a single session. When one refresh token is compromised and you want to invalidate that, you have to logout user from all devices.

But if you store refresh token, user can have multiple sessions and you can have fine-grained control over user sessions and avoid misuse of the server resources. And also let user know how many sessions they currently have and show session info like device and location. This is why you see helpful email notifications like “Your account has been accessed from a new ip”.

If you don’t want advanced session management then a single session with just user data is enough.

Set up Redis

Create src/utils/redis.ts file. Configure Redis and create a Redis client:

import { Redis } from "ioredis";

export const redis = new Redis(process.env.REDIS_URL!);

Make sure to add REDIS_URL to env. If using local Redis, the URL looks like this:

REDIS_URL=redis://localhost:6379

Creating, and verifying tokens

Create another module called auth. In there, create auth.service.ts. Here, we will write reusable functions and generate and verify tokens:

import jwt from "jsonwebtoken";

const ACCESS_TOKEN_SECRET = process.env.ACCESS_TOKEN_SECRET!;
const REFRESH_TOKEN_SECRET = process.env.REFRESH_TOKEN_SECRET!;

export default class AuthService {
  createAccessToken(userId: number) {
    const accessToken = jwt.sign({ sub: userId }, ACCESS_TOKEN_SECRET, {
      expiresIn: "15m",
    });

    return accessToken;
  }

  createRefreshToken(userId: number) {
    const refreshToken = jwt.sign({ sub: userId }, REFRESH_TOKEN_SECRET, {
      expiresIn: "7d",
    });

    return refreshToken;
  }

  verifyAccessToken(accessToken: string) {
    try {
      const decoded = jwt.verify(accessToken, ACCESS_TOKEN_SECRET) as {
        sub: string;
      };

      return decoded.sub;
    } catch (error) {
      console.log(error);

      return null;
    }
  }

  verifyRefreshToken(refreshToken: string) {
    try {
      const decoded = jwt.verify(refreshToken, REFRESH_TOKEN_SECRET) as {
        sub: string;
      };

      return decoded.sub;
    } catch (error) {
      console.log(error);

      return null;
    }
  }

As you can see, we are creating tokens by signing them with a secret and then we use that same secret to verify them.

Open .env and create two new env variables - ACCESS_TOKEN_SECRET and REFRESH_TOKEN_SECRET. Secrets can be any strings but for real projects I recommend using RSA keys.

Implement login

Steps in login:

1. Find the user in the db with email.
2. Verify if the password is correct by comparing it against the password in the db using bcrypt (since we store hashed passwords).
3. If all good, generate access and refresh tokens, store refresh token along with user id in Redis and return tokens.
4. Then in the user controller class, call this method and send the tokens in response as HTTP cookies.

// user.service.ts
import { db } from "../../utils/db";
import { redis } from "../../utils/redis";
import { users } from "../user/user.schema";
import bcrypt from "bcryptjs";
import { eq } from "drizzle-orm";

export default class AuthService {
...
  async login(data: typeof users.$inferInsert) {
    const { email, password } = data;

    try {
      const user = (
        await db.select().from(users).where(eq(users.email, email)).limit(1)
      )[0];

      if (!user) {
        throw new TRPCError({
          code: "UNAUTHORIZED",
          message: "Invalid email or password",
        });
      }

      const isPasswordCorrect = await bcrypt.compare(password, user.password);

      if (!isPasswordCorrect) {
        throw new TRPCError({
          code: "UNAUTHORIZED",
          message: "Invalid email or password",
        });
      }

      const accessToken = this.createAccessToken(user.id);
      const refreshToken = this.createRefreshToken(user.id);

      // Store refresh token in redis to track active sessions
      await redis.set(
        `refresh_token:${refreshToken}`,
        user.id,
        "EX",
        7 * 24 * 60 * 60 // 7 days
      );
      
      // Store refresh token in redis set to track active sessions
      await redis.sadd(`refresh_tokens:${user.id}`, refreshToken);
      await redis.expire(`refresh_tokens:${user.id}`, 7 * 24 * 60 * 60); // 7 days

      // Store user in redis to validate session
      await redis.set(
        `user:${user.id}`,
        JSON.stringify(user),
        "EX",
        7 * 24 * 60 * 60
      ); // 7 days
      
      return {
        accessToken,
        refreshToken,
      };
    } catch (error) {
      console.log(error);

      throw new TRPCError({
        code: "UNAUTHORIZED",
        message: "Something went wrong",
      });
    }
  }
...
}

Create user.controller.ts:

// user.controller.ts

import Cookies, { SetOption } from "cookies";
import { Context } from "../../trpc";
import { users } from "../user/user.schema";
import AuthService from "./auth.service";

const cookieOptions: SetOption = {
  httpOnly: true,
  secure: process.env.NODE_ENV === "production",
  sameSite: "strict",
  path: "/",
  domain: "localhost" // for production, put something like ".example.com"
};

const accessTokenCookieOptions: SetOption = {
  ...cookieOptions,
  maxAge: 15 * 60 * 1000, // 15 minutes
};

const refreshTokenCookieOptions: SetOption = {
  ...cookieOptions,
  maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days
};

export default class AuthController extends AuthService {
  async loginHandler(data: typeof users.$inferInsert, ctx: Context) {
    const { accessToken, refreshToken } = await super.login(data);

    const cookies = new Cookies(ctx.req, ctx.res, {
      secure: process.env.NODE_ENV === "production",
    });
    cookies.set("accessToken", accessToken, { ...accessTokenCookieOptions });
    cookies.set("refreshToken", refreshToken, {
      ...refreshTokenCookieOptions,
    });
    cookies.set("logged_in", "true", { ...accessTokenCookieOptions });

    return { success: true };
  }
}

Create auth.routes.ts file:

import { publicProcedure, router } from "../../trpc";
import { insertUserSchema } from "../user/user.schema";
import AuthController from "./auth.controller";

const authRouter = router({
  login: publicProcedure
    .input(insertUserSchema)
    .mutation(({ input, ctx }) =>
      new AuthController().loginHandler(input, ctx)
    ),
});

export default authRouter;

Add this auth route group to src/routes.ts.

import authRouter from "./modules/auth/auth.routes";

const appRouter = router({
  ...
  auth: authRouter,
});

Implement register

Register is simple, we just have to create an account. (I’m going to cover email verification in a later article since a lot of products ask users to verify email after giving access to the platform as part of their marketing strategy.)

Steps:

1. Check if the user already exists.
2. If not, hash the password and create a user.

// auth.service.ts

...
  async register(data: typeof users.$inferInsert) {
    try {
      const { email, password } = data;

      const user = (
        await db.select().from(users).where(eq(users.email, email)).limit(1)
      )[0];
      if (user) {
        throw new TRPCError({
          code: "CONFLICT",
          message:
            "This email is associated with an existing account. Please login instead.",
        });
      }

      const salt = await bcrypt.genSalt(12);
      const hashedPassword = await bcrypt.hash(password, salt);

      const newUser = await db
        .insert(users)
        .values({
          email,
          password: hashedPassword,
        })
        .returning();

      return {
        success: true,
        user: newUser,
      };
    } catch (error) {
      console.log(error);

      throw new TRPCError({
        code: "INTERNAL_SERVER_ERROR",
        message: "Something went wrong",
      });
    }
  }
...

// auth.controller.ts

...
  async registerHandler(data: typeof users.$inferInsert) {
    return await super.register(data);
  }
...

// auth.routes.ts

...
  register: publicProcedure
    .input(insertUserSchema)
    .mutation(({ input }) => new AuthController().registerHandler(input)),
...

Implement access token refresh

To implement access token refresh:

1. Check if a refresh token exists in active sessions.
2. Verify token.
3. Check if the user still exists.
4. If allis good, generate a new access token and send it as a cookie.

// auth.service.ts

...
  async refreshAccessToken(refreshToken: string) {
    try {
      const isTokenExist = await redis.get(`refresh_token:${refreshToken}`);
      if (!isTokenExist) {
        throw new TRPCError({
          code: "UNAUTHORIZED",
          message: "Invalid refresh token",
        });
      }

      const userId = await this.verifyRefreshToken(refreshToken);
      if (!userId) {
        throw new TRPCError({
          code: "UNAUTHORIZED",
          message: "Invalid refresh token",
        });
      }

      const accessToken = this.createAccessToken(parseInt(userId));

      return accessToken;
    } catch (error) {
      console.log(error);

      throw new TRPCError({
        code: "INTERNAL_SERVER_ERROR",
        message: "Something went wrong",
      });
    }
  }
...

// auth.controller.ts

...
  async refreshAccessTokenHandler(ctx: AuthenticatedContext) {
    const cookies = new Cookies(ctx.req, ctx.res, {
      secure: process.env.NODE_ENV === "production",
    });

    const refreshToken = cookies.get("refreshToken");
    if (!refreshToken) {
      throw new TRPCError({
        code: "UNAUTHORIZED",
        message: "Refresh token is required",
      });
    }

    const accessToken = await super.refreshAccessToken(refreshToken);
    cookies.set("accessToken", accessToken, { ...accessTokenCookieOptions });
    cookies.set("logged_in", "true", { ...accessTokenCookieOptions });

    return { success: true };
  }
...

// auth.routes.ts

...
  refreshAccessToken: protectedProcedure.mutation(({ ctx }) =>
    new AuthController().refreshAccessTokenHandler(ctx)
  ),
...

Implement logout

Finally, let’s implement logout endpoint. For this, all we have to do is clear Redis and cookies.

Two types of logouts:

1. Single session: Clear currently active session i.e. the device the user currently using and want to logout from.

// auth.controller.ts

...
  async logoutHandler(ctx: AuthenticatedContext) {
    const { req, res, user } = ctx;

    try {
      const cookies = new Cookies(req, res, {
        secure: process.env.NODE_ENV === "production",
      });
      const refreshToken = cookies.get("refreshToken");

      if (refreshToken) {
        await redis.del(`refresh_token:${refreshToken}`);
        await redis.srem(`refresh_tokens:${user.id}`, refreshToken);
      }

      cookies.set("accessToken", "", { ...accessTokenCookieOptions });
      cookies.set("refreshToken", "", { ...refreshTokenCookieOptions });
      cookies.set("logged_in", "false", { ...accessTokenCookieOptions });

      return { success: true };
    } catch (error) {
      console.log(error);

      throw new TRPCError({
        code: "INTERNAL_SERVER_ERROR",
        message: "Something went wrong",
      });
    }
  }
...

// auth.routes.ts

...
  logout: protectedProcedure.mutation(({ ctx }) =>
    new AuthController().logoutHandler(ctx)
  ),
...

1. All sessions: This is often given as security feature if user notices some suspicious activity happening in their account. (I’ve seen a lot of products that don’t give this feature and I truly hate them.)

// auth.controller.ts

...
  async logoutAllHandler(ctx: AuthenticatedContext) {
    const { req, res, user } = ctx;

    try {
      const refreshTokens = await redis.smembers(`refresh_tokens:${user.id}`);

      const pipeline = redis.pipeline();

      refreshTokens.forEach((refreshToken) => {
        pipeline.del(`refresh_token:${refreshToken}`);
      });
      pipeline.del(`refresh_tokens:${user.id}`);
      pipeline.del(`user:${user.id}`);

      await pipeline.exec();

      const cookies = new Cookies(req, res, {
        secure: process.env.NODE_ENV === "production",
      });
      cookies.set("accessToken", "", { ...accessTokenCookieOptions });
      cookies.set("refreshToken", "", { ...refreshTokenCookieOptions });
      cookies.set("logged_in", "false", { ...accessTokenCookieOptions });

      return { success: true };
    } catch (error) {
      console.log(error);

      throw new TRPCError({
        code: "INTERNAL_SERVER_ERROR",
        message: "Something went wrong",
      });
    }
  }
...

// auth.routes.ts

...
  logoutAll: protectedProcedure.mutation(({ ctx }) =>
    new AuthController().logoutAllHandler(ctx)
  ),
...

Set up auth middleware

Let’s set up tRPC context and middleware and pass user data for authenticated requests, so we can use that to create protected procedures.

1. First, open src/trpc.ts and modify createContext to check for authenticated requests.

Steps:

1. Get accessToken from request headers.
2. Verify access token.
3. Check if the user has an active session in Redis.
4. Check if the user still exists in the db.
5. Return req, and res in the tRPC context. And user object if it is an authenticated request.

// src/trpc.ts
import Cookies from "cookies";

export const createContext = async ({
  req,
  res,
}: CreateExpressContextOptions) => {
  try {
    const cookies = new Cookies(req, res);
    const accessToken = cookies.get("accessToken");
    if (!accessToken) {
      return { req, res };
    }

    const userId = await new AuthService().verifyAccessToken(accessToken);
    if (!userId) {
      return { req, res };
    }

    const session = await redis.get(`user:${userId}`);
    if (!session) {
      return { req, res };
    }

    const user = (
      await db
        .select()
        .from(users)
        .where(eq(users.id, parseInt(userId)))
        .limit(1)
    )[0];
    if (!user) {
      return { req, res };
    }

    return {
      req,
      res,
      user,
    };
  } catch (error) {
    console.log(error);

    throw new TRPCError({
      code: "INTERNAL_SERVER_ERROR",
      message: "Something went wrong",
    });
  }
};

We can use this to identify which requests are authenticated.

1. Now let’s create a reusable tRPC procedure called protectedProcedure to protect some endpoints and a tRPC middleware called isAuthenticted.

// src/trpc.ts

// Create another context type for protected routes, so ctx.user won't be null in authed requests
export type AuthenticatedContext = Context & {
  user: NonNullable<Context["user"]>;
};

// Middleware to check if user is authenticated
const isAuthenticated = t.middleware(({ ctx, next }) => {
  if (!ctx.user) {
    throw new TRPCError({
      code: "UNAUTHORIZED",
      message: "You must be logged in to access this resource",
    });
  }

  return next({
    ctx: {
      ...ctx,
      user: ctx.user,
    },
  });
});

// Using the middleware, create a protected procedure
export const protectedProcedure = publicProcedure.use(isAuthenticated);

In a later article, we will create proProtectedProcedure for paid features when integrating a payment provider 👀. Follow for updates 🤫.

Now use this procedure in all transaction routes.

// src/modules/transaction/transaction.routes.ts

const transactionRouter = router({
  create: protectedProcedure // <--- here
    .input(insertUserSchema)
    .mutation(({ input, ctx }) => 
      new TransactionController().createTransactionHandler(input, ctx) // pass context 
    ),

  getAll: protectedProcedure.query(({ ctx }) => // <--- here
    new TransactionController().getTransactionsHandler(ctx) // pass context 
  ),
});

Then, open transaction.controller.ts and modify it like this to use the user id from ctx.user:

...
  async createTransactionHandler(
    data: Omit<typeof transactions.$inferInsert, "userId">, // <-- Omit userId as we get it from ctx, not input
    ctx: AuthenticatedContext // <-- add ctx param
  ) {
    return await super.createTransaction({
      ...data,
      userId: ctx.user.id,
    });
  }

  async getTransactionsHandler(ctx: AuthenticatedContext) { // <-- same here
    return await super.getTransactions(ctx.user.id);
  }
...

Test Everything

Let’s test our API using Postman to verify everything is working as expected. Testing tRPC API in Postman is a little different than traditional REST/Graphql APIs.

Limitations:

• Cannot use superjson. So, before testing let's comment out superjson transformer in trpc.ts.

const t = initTRPC.context<Context>().create({
  // transformer: SuperJSON,
});

• You cannot test queries. For this, just change query to mutation. After testing, make sure to revert changes.

1. POST /auth.register

1. POST /auth.login

If you have Redis Insight downloaded, you can easily see your keys.

1. POST /auth.refreshAccessToken

1. POST /auth.logout

If you observe the cookies and headers tab, you can see tokens are empty and if you check Redis insight, the refresh token will be deleted. Same with /auth.logoutAll but this time, all refresh tokens belonging to the user including the user session will be deleted.

1. Also, after logging in, try to test transaction routes.

That’s it!

In the next article, I will share how to secure the Next.js front end.

Follow for updates 🚀.

Socials

Implementing Cookie-Based JWT Authentication in a tRPC Backend was originally published in CodeX on Medium, where people are continuing the conversation by highlighting and responding to this story.

Published from Publish Studio

In this tutorial, let’s learn how to connect a Postgres database to a tRPC express backend using Drizzle ORM. I have also created a simple frontend for our finance tracker application. You can copy frontend code from the repo here.

This is part 2, read part 1 here: Let’s Build a Full-Stack App with tRPC and Next.js 14

Backend

If you don’t have Postgres installed locally, please do or you can also use a hosted database.

Once you have Postgres ready, add DATABASE_URL to your .env:

DATABASE_URL=postgres://postgres:password@localhost:5432/myDB

Setting up db with drizzle

To set up drizzle, start off by installing these packages:

yarn add drizzle-orm pg dotenv
yarn add -D drizzle-kit tsx @types/pg

Now, all you have to do is connect drizzle to the DB. To do that, create src/utils/db.ts file and configure drizzle:

import { drizzle } from "drizzle-orm/node-postgres";
import pg from "pg";
const { Pool } = pg;

export const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: process.env.NODE_ENV === "production",
});

export const db = drizzle(pool);

That’s it! Our db setup is ready. We can now create tables and interact with our db using drizzle ORM.

Create the first module

Regarding the project structure, there are mainly two types:

1. Modules: Divide features into different modules and keep all related files together. Popular frameworks like NestJs and Angular use this structure.

.
└── feature/
    ├── feature.controller.ts
    ├── feature.routes.ts
    ├── feature.schema.ts
    └── feature.service.ts

1. Separate folders based on the purpose:

.
├── controllers/
│   ├── feature1.controller.ts
│   └── feature2.controller.ts
├── services/
│   ├── feature1.service.ts
│   └── feature2.service.ts
└── models/
    ├── feature1.model.ts
    └── feature2.model.ts

I personally prefer modules because it just makes sense (plz stop using 2nd one).

Now, let’s create our first module called transaction. This is our core feature. Start by creating src/modules/transaction/transaction.schema.ts file. This is where we define transaction schema using drizzle.

The great thing about using drizzle to write schemas is it lets us use typescript. So you don’t have to learn a new syntax and ensure type safety for your schemas.

To record a transaction (txn), the most basic things we need are:

• txn amount
• txn type — credit or debit
• description — a simple note to refer to later
• tag — a category like shopping/travel/food, and so on.

First, let’s create enums for txn type and tag:

import {
  pgEnum,
} from "drizzle-orm/pg-core";

export const txnTypeEnum = pgEnum("txnType", ["Incoming", "Outgoing"]);
export const tagEnum = pgEnum("tag", [
  "Food",
  "Travel",
  "Shopping",
  "Investment",
  "Salary",
  "Bill",
  "Others",
]);

Then, let’s create the schema:

import {
  integer,
  pgTable,
  serial,
  text,
  timestamp,
} from "drizzle-orm/pg-core";

export const transactions = pgTable("transactions", {
  id: serial("id").primaryKey(),
  amount: integer("amount").notNull(),
  txnType: txnTypeEnum("txn_type").notNull(),
  summary: text("summary"),
  tag: tagEnum("tag").default("Others"),
  createdAt: timestamp("created_at").defaultNow(),
  updatedAt: timestamp("updated_at")
    .defaultNow()
    .$onUpdate(() => new Date()),
});

As you can see, we simply wrote typescript code and created a table!

Run migrations

One final step before we can start interacting with our db is to apply changes to our database so that all the tables will be created. To do that we have to run migrations. Drizzle has this amazing tool called drizzle-kit which handles migrations for us, so all we have to do is run a command.

Before doing that we have to create a file called drizzle.config.ts in the project root, which includes all the information about the database and schemas.

import "dotenv/config";
import { defineConfig } from "drizzle-kit";

export default defineConfig({
  schema: "./src/**/*.schema.ts",
  out: "./drizzle",
  dialect: "postgresql",
  dbCredentials: {
    url: process.env.DATABASE_URL!,
    ssl: process.env.NODE_ENV === "production",
  },
});

With that ready, run the below command:

yarn dlx drizzle-kit push

That’s it! Now we can start interacting with db and write our business logic.

Business logic

Let’s add logic to add new transactions.

If you already don’t know:

• Service — where we interact with DB and write most of the business logic
• Controller — handle request/response

Create transaction/transaction.service.ts and write logic to add new transactions to db:

import { TRPCError } from "@trpc/server";
import { db } from "../../utils/db";
import { transactions } from "./transaction.schema";

export default class TransactionService {
  async createTransaction(data: typeof transactions.$inferInsert) {
    try {
      return await db.insert(transactions).values(data).returning();
    } catch (error) {
      console.log(error);

      throw new TRPCError({
        code: "INTERNAL_SERVER_ERROR",
        message: "Failed to create transaction",
      });
    }
  }
}

Another benefit of using drizzle ORM is it provides type definitions for different CRUD methods like $inferInsert, $inferSelect so there is no need to define the types again. Here, by using typeof transactions.$inferInsert we don't have to provide values for fields like primary key, and fields with default values like createdAt, and updatedAt, so typescript won't throw an error.

Drizzle also has extensions like drizzle-zod which can be used to generate zod schemas. Another headache was prevented by drizzle 🫡. So open transaction.schema.ts and create zod schema for insert operation:

import { createInsertSchema } from "drizzle-zod";

export const insertUserSchema = createInsertSchema(transactions).omit({
  id: true,
  createdAt: true,
  updatedAt: true,
});

Let’s use this in the controller, create transaction/transaction.controller.ts:

export default class TransactionController extends TransactionService {
  async createTransactionHandler(data: typeof transactions.$inferInsert) {
    return await super.createTransaction(data);
  }
}

Now, all that remains is to expose this controller through an endpoint. For that, create transaction/transaction.routes.ts. Since we are using tRPC, to create an endpoint, we have to define a procedure:

import { publicProcedure, router } from "../../trpc";
import TransactionController from "./transaction.controller";
import { insertUserSchema } from "./transaction.schema";

const transactionRouter = router({
  create: publicProcedure
    .input(insertUserSchema)
    .mutation(({ input }) =>
      new TransactionController().createTransactionHandler(input)
    ),
});

export default transactionRouter;

If you remember from part 1, we created a reusable router that can be used to group procedures and publicProcedure which creates an endpoint.

Finally, open src/routes.ts and use the above transactionRouter:

import transactionRouter from "./modules/transaction/transaction.routes";
import { router } from "./trpc";

const appRouter = router({
  transaction: transactionRouter,
});

export default appRouter;

That’s it! The backend is ready. This is the final backend structure:

.
├── README.md
├── drizzle
│   ├── 0000_true_junta.sql
│   └── meta
│       ├── 0000_snapshot.json
│       └── _journal.json
├── drizzle.config.ts
├── package.json
├── src/
│   ├── index.ts
│   ├── modules/
│   │   └── transaction/
│   │       ├── transaction.controller.ts
│   │       ├── transaction.routes.ts
│   │       ├── transaction.schema.ts
│   │       └── transaction.service.ts
│   ├── routes.ts
│   ├── trpc.ts
│   └── utils/
│       ├── db.ts
│       └── migrate.ts
├── tsconfig.json
└── yarn.lock

Challenge for you

Before proceeding to frontend integration, as a challenge, create an endpoint for getting all transactions.

Frontend

It’s time to integrate the created endpoints in our frontend. Since this is not a frontend tutorial, I’ll let you just copy the code from the repo.

All I’ve changed is:

• Set up shadcn/ui
• Change src/components/modules/dashboard/index.tsx

Also, as you observe, I’m using a modules-like structure here too. If you also like this structure, you can learn more from my previous projects Publish Studio and My One Post

In part 1, we queried data using built-in tRPC react-query.

...
  const { data } = trpc.test.useQuery();

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      {data}
    </main>
  );
...

So, if you already know react-query, there’s isn’t much to learn except with tRPC we don’t have to create queryFn or mutationFn because we directly call backend methods.

This is how mutations are used:

...
  const { mutateAsync: createTxn, isLoading: isCreating } =
    trpc.transaction.create.useMutation({
      onSuccess: async () => {
        form.reset();
        await utils.transaction.getAll.invalidate();
      },
    });
    
  const addTransaction = async (data: z.infer<typeof formSchema>) => {
    try {
      await createTxn(data);
    } catch (error) {
      console.error(error);
    }
  };
...

See In Action

I hope you like this tutorial. Feel free to extend the functionality. In the next article, I’ll share how to add authentication.

Project source code can be found here.

Follow me for more 🚀. Socials

Setting Up Drizzle & Postgres with tRPC and Next.js App was originally published in CodeX on Medium, where people are continuing the conversation by highlighting and responding to this story.

Published from Publish Studio

UPDATE: Publish Studio is now generally available. Sign Up for free and start writing.

It’s been a really long time since I last published an article here. I’ve been inactive due to some personal career reasons. But I’m back now with so many exciting things I learned last year and can’t wait to share them with you.

Quick Intro

First of all, say “Hi” to Publish Studio, a platform I’ve building for the past few months. If you are a content writer, then you should definitely check it out. And if you are someone who has an audience on multiple blogging platforms and need an easy way to manage your content across platforms, then you should 100% give it a try.

Currently, Publish Studio is in beta, so please join the waitlist. I would appreciate your feedback on any issues before making it generally available.

Join waitlist: https://publishstudio.one

Main Features

1. Rich Text Editing

Elevate your content with rich text editing. It provides you with robust formatting tools to refine your writing and make it visually appealing.

2. Dictation

Simplify your content creation process with the dictation feature. Speak naturally, and let the platform transcribe your words accurately into text. It’s a convenient tool that saves time and effort, allowing you to focus on expressing your ideas effectively.

3. Tone Analysis

Gain insights into the emotional tone of your content with the tone analysis feature. It helps you understand how your writing resonates with your audience, enabling you to fine-tune your messaging accordingly. Whether you aim for a casual or formal tone, the analysis tool assists you in crafting content that connects authentically.

4. Import Content

If you got your stuff scattered everywhere, you can bring them all together into the platform with the import feature, making it easy to consolidate your content library in one place.

5. Integrated Media Tools

Integrated media tools! With access to gems like Pexels, Unsplash, Imagekit, and Cloudinary right on the platform.

6. Export Content

A small but helpful feature. Export your content in different file formats.

7. Publish to Multiple Platforms

I want to clear up any confusion that might come in the future. Publishing to multiple platforms is one of the core features of Publish Studio but it’s not the only goal.

With Publish Studio, publishing to multiple platforms is a breeze! Spread your content far and wide with just a few clicks.

8. Schedule Posts

You don’t have to publish right away. With the schedule feature, you’re the master of your content calendar. Plan ahead, set the dates, and let Publish Studio do the rest.

9. Writing Stats

Curious about your writing habits? Dive into your writing stats and discover your creative superpowers!

…and a lot more already planned but need a little time and your big support ❤️.

This is just the start with more features coming in the future.

Follow me for more! Onwards and upwards 🚀.