How to authenticate a non web app with NextJS API route and lucia-auth v3?

[raffi23]

I have successfully built authentication on my NextJS app and it is working great with cookie sessions however, I was thinking what if in the future I want to authenticate a React native app with my app ?

I have seen on the docs that I can just store the session id on the native device local storage and then send it back to the server and validate it.

While this worked I am having a problem, after validating that the user session is valid I am doing something like this

const session = await lucia.createSession(user.id, {});
const { name, value, attributes } = lucia.createSessionCookie(session.id);
cookies().set(name, value, attributes);
return new Response(session.id, { status: 200 });

Should I create separate routes one for web and one for other devices where storing the session cookie is not applicable or should I check for user agent? or something else?

I would be grateful if someone can help me figure this out.

[sunnypatell]

@raffi23 you don't need separate routes. the cleanest approach is to check for a bearer token first, then fall back to cookies. this way the same endpoints serve both web and native clients.

in your auth validation:

export async function validateRequest(request: Request) {
  // check bearer token first (native/non-browser clients)
  const authHeader = request.headers.get("Authorization");
  if (authHeader?.startsWith("Bearer ")) {
    const sessionId = authHeader.substring(7);
    return await lucia.validateSession(sessionId);
  }

  // fall back to cookie auth (web browser)
  const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? null;
  if (!sessionId) return { user: null, session: null };
  return await lucia.validateSession(sessionId);
}

in your login endpoint, return the session ID in the response body AND set the cookie. the native app uses the body, the browser uses the cookie:

const session = await lucia.createSession(user.id, {});
const sessionCookie = lucia.createSessionCookie(session.id);
cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
return Response.json({ sessionId: session.id });

from React Native, store the sessionId and send it as Authorization: Bearer <sessionId> on subsequent requests. the lucia v3 docs cover this pattern under bearer tokens.