Better Auth•4d ago

App infinitely reloading and not sure why.

In my Astro app i am using a simple middleware following the example in the docs and for some reason when i am on my root page it infinitely reloads the page, the issue seems to be happening when calling:

  const isAuthed = await auth.api.getSession({
    headers: context.request.headers,
  });

  const isAuthed = await auth.api.getSession({
    headers: context.request.headers,
  });

my whole middleware:

import { auth } from "@/lib/server/auth";
import type { APIContext, MiddlewareNext } from "astro";
import { sequence } from "astro:middleware";

const authMiddleware = async (context: APIContext, next: MiddlewareNext) => {
  const isAuthed = await auth.api.getSession({
    headers: context.request.headers,
  });

  if (isAuthed) {
    context.locals.user = isAuthed.user;
    context.locals.session = isAuthed.session;
    return await next();
  }

  context.locals.user = null;
  context.locals.session = null;

  return await next();
};

const protectRoutes = async (context: APIContext, next: MiddlewareNext) => {
  const isAuthed = context.locals.session;
  const path = context.url.pathname;

  if (!isAuthed && path === "/") {
    return context.rewrite(
      new Request("/login", {
        headers: {
          "x-redirect-to": context.url.pathname,
        },
      }),
    );
  }

  return await next();
};

export const onRequest = sequence(authMiddleware, protectRoutes);

import { auth } from "@/lib/server/auth";
import type { APIContext, MiddlewareNext } from "astro";
import { sequence } from "astro:middleware";

const authMiddleware = async (context: APIContext, next: MiddlewareNext) => {
  const isAuthed = await auth.api.getSession({
    headers: context.request.headers,
  });

  if (isAuthed) {
    context.locals.user = isAuthed.user;
    context.locals.session = isAuthed.session;
    return await next();
  }

  context.locals.user = null;
  context.locals.session = null;

  return await next();
};

const protectRoutes = async (context: APIContext, next: MiddlewareNext) => {
  const isAuthed = context.locals.session;
  const path = context.url.pathname;

  if (!isAuthed && path === "/") {
    return context.rewrite(
      new Request("/login", {
        headers: {
          "x-redirect-to": context.url.pathname,
        },
      }),
    );
  }

  return await next();
};

export const onRequest = sequence(authMiddleware, protectRoutes);

could be my api routes doing something weird but i wouldn't have though so

Solution:

I am was able to figure this out, when we try and auth a request we send it to /api/auth/* to get the session however the middleware will run on this meaning we will end up in an infinite loop due to it calling itself over and over again, not a problem on certain pages but possibly on others. my reworked middleware.ts ```ts import { auth } from "@/lib/server/auth"; import { defineMiddleware } from "astro:middleware"; ...

Jump to solution

1 Reply

Solution

Jacob•3d ago

import { auth } from "@/lib/server/auth";
import { defineMiddleware } from "astro:middleware";

export const onRequest = defineMiddleware(async (context, next) => {
  const path = context.url.pathname;

  if (path.startsWith("/api/auth")) return next();

  const isAuthed = await auth.api.getSession({
    headers: context.request.headers,
  });

  if (isAuthed) {
    context.locals.user = isAuthed.user;
    context.locals.session = isAuthed.session;
  } else {
    context.locals.user = null;
    context.locals.session = null;
  }

  if (!isAuthed && path === "/") {
    return context.rewrite(
      new Request("/login", {
        headers: {
          "x-redirect-to": context.url.pathname,
        },
      }),
    );
  }

  if (isAuthed && path === "/login") {
    return context.rewrite(new Request("/"));
  }

  return next();
});

import { auth } from "@/lib/server/auth";
import { defineMiddleware } from "astro:middleware";

export const onRequest = defineMiddleware(async (context, next) => {
  const path = context.url.pathname;

  if (path.startsWith("/api/auth")) return next();

  const isAuthed = await auth.api.getSession({
    headers: context.request.headers,
  });

  if (isAuthed) {
    context.locals.user = isAuthed.user;
    context.locals.session = isAuthed.session;
  } else {
    context.locals.user = null;
    context.locals.session = null;
  }

  if (!isAuthed && path === "/") {
    return context.rewrite(
      new Request("/login", {
        headers: {
          "x-redirect-to": context.url.pathname,
        },
      }),
    );
  }

  if (isAuthed && path === "/login") {
    return context.rewrite(new Request("/"));
  }

  return next();
});

Gaming

Programming

App infinitely reloading and not sure why.

Did you find this page helpful?