vercel / ai-chatbot

A full-featured, hackable Next.js AI chatbot built by Vercel
https://chat.vercel.ai
Other
6.52k stars 2.05k forks source link

How do I allow even unauthenticated users to not be forced into signing up? #445

Open solomonshalom opened 2 days ago

solomonshalom commented 2 days ago

Hello! Teams,

Hope you're doing great!

Small Q: how do I make it so that even unauthenticated users, can see the chat interface, w/o needing to log-in first?

I tried this:

import { NextAuthConfig } from "next-auth";

export const authConfig = {
  pages: {
    signIn: "/login",
    newUser: "/",
  },
  providers: [
    // added later in auth.ts since it requires bcrypt which is only compatible with Node.js
    // while this file is also used in non-Node.js environments
  ],
  callbacks: {
    authorized({ auth, request: { nextUrl } }) {
      let isLoggedIn = !!auth?.user;
      let isOnChat = nextUrl.pathname.startsWith("/");
      let isOnRegister = nextUrl.pathname.startsWith("/register");
      let isOnLogin = nextUrl.pathname.startsWith("/login");

      if (isLoggedIn && (isOnLogin || isOnRegister)) {
        return Response.redirect(new URL("/", nextUrl));
      }

      if (isOnRegister || isOnLogin) {
        return true; // Always allow access to register and login pages
      }

      if (isOnChat) {
        return true;
      }

      if (isLoggedIn) {
        return Response.redirect(new URL("/", nextUrl));
      }

      return true;
    },
  },
} satisfies NextAuthConfig;

Didn't quite work :(

Please do LMK how to proceed!

CC: @jeremyphilemon

jeremyphilemon commented 23 hours ago

Hey @solomonshalom, thanks for reaching out!

If you want to allow unauthenticated users to use the chatbot, you will have to comment out some of the checks in auth.config.ts like below:

import { NextAuthConfig } from "next-auth";

export const authConfig = {
  pages: {
    signIn: "/login",
    newUser: "/",
  },
  providers: [
    // added later in auth.ts since it requires bcrypt which is only compatible with Node.js
    // while this file is also used in non-Node.js environments
  ],
  callbacks: {
    authorized({ auth, request: { nextUrl } }) {
      let isLoggedIn = !!auth?.user;
      // let isOnChat = nextUrl.pathname.startsWith("/");
      let isOnRegister = nextUrl.pathname.startsWith("/register");
      let isOnLogin = nextUrl.pathname.startsWith("/login");

      if (isLoggedIn && (isOnLogin || isOnRegister)) {
        return Response.redirect(new URL("/", nextUrl));
      }

      if (isOnRegister || isOnLogin) {
        return true; // Always allow access to register and login pages
      }

      // if (isOnChat) {
      //   if (isLoggedIn) return true;
      //   return false; // Redirect unauthenticated users to login page
      // }

      // if (isLoggedIn) {
      //   return Response.redirect(new URL("/", nextUrl));
      // }

      return true;
    },
  },
} satisfies NextAuthConfig;

Furthermore, I would make sure you ease the authentication checks in the route handlers based on your needs.

solomonshalom commented 20 hours ago

Hello! @jeremyphilemon

I gave it a shot but for some reason, when I check it now - although the signup screen doesn't show up, the chat is glitching. What I mean by glitching is that if I type in a response, it's not going through :(

What do you think I should be doingg?