Merge pull request #196 from leongj/local-dev-basic-auth

Local dev basic auth

docs/3-run-locally.md

@@ -6,23 +6,21 @@ Clone this repository locally or fork to your Github account. Run all of the the
 
 - **History Database**: If you didn't [provision the Azure resources](2-provision-azure-resources.md), you **must** at least deploy an instance of Cosmos DB in your Azure Subscription to store chat history.
 
-- **Identity Provider**: Follow the [instructions](3-run-locally.md) to add one.
+- **Identity Provider**: For local development, you have the option of using a username / password. If you prefer to use an Identity Provider, follow the [instructions](3-run-locally.md) to add one.
 
 ## Steps
 
 1. Change directory to the `src` folder
-2. Create a new file named `.env.local` to store the environment variables add the following variables.
-
-> **Note**
-> Do not use double-quotes and do not delete any of the variables.
-
-> **Note**
-> Make sure that `NEXTAUTH_URL=http://localhost:3000` has no comments in the same line.
-  
-3. <details><summary>Set the following environmnet variables</summary>
+2. Copy the file `.env.example` and rename it to `.env.local`.
+3. Populate the environment variables in this file.  
+   <details><summary>Environment Variables (ref src/.env.example)</summary>
 
     ```bash
-    # Set your environment details
+    # NOTES: 
+    # - Do not use double-quotes and do not delete any of the variables.
+    # - Make sure that NEXTAUTH_URL=http://localhost:3000 has no comments in the same line.
+
+    # Update your Azure OpenAI details
     # AZURE_OPENAI_API_INSTANCE_NAME should be just the name of azure openai resource and not the full url;
     # AZURE_OPENAI_API_DEPLOYMENT_NAME should be deployment name from your azure openai studio and not the model name.
     # AZURE_OPENAI_API_VERSION should be Supported versions checkout docs https://learn.microsoft.com/en-us/azure/ai-services/openai/reference
@@ -71,7 +69,13 @@ Clone this repository locally or fork to your Github account. Run all of the the
 5. Start the app by running `npm run dev`
 6. Access the app on [http://localhost:3000](http://localhost:3000)
 
-You should now be prompted to login with your chosen OAuth provider. Once successfully logged in, you can start creating new conversations.
+You should now be prompted to login with your chosen OAuth provider.
+> NOTE: If using Basic Auth (DEV ONLY) any username you enter will create a new user id (hash of username@localhost). You can use this to simulate multiple users.
+
+![Chat Login (DEV)](/images/chat-login-dev.png)
+
+
+Once successfully logged in, you can start creating new conversations.
 
 ![Chat Home](/images/chat-home.png)
 ![Chat history](/images/chat-history.png)

src/.env.example

@@ -1,3 +1,7 @@
+# NOTES: 
+# - Do not use double-quotes and do not delete any of the variables.
+# - Make sure that NEXTAUTH_URL=http://localhost:3000 has no comments in the same line.
+
 # Update your Azure OpenAI details
 # AZURE_OPENAI_API_INSTANCE_NAME should be just the name of azure openai resource and not the full url; 
 # AZURE_OPENAI_API_DEPLOYMENT_NAME should be deployment name from your azure openai studio and not the model name.
@@ -11,7 +15,7 @@ AZURE_OPENAI_API_EMBEDDINGS_DEPLOYMENT_NAME=
 # Update your admin email addresses - comma separated
 ADMIN_EMAIL_ADDRESS="[email protected],[email protected]"
 
-# You must have atleast one of the following auth providers configured
+# Identity provider is optional if you are running in development mode locally (npm run dev)
 AUTH_GITHUB_ID=
 AUTH_GITHUB_SECRET=
 

src/components/login/login.tsx

@@ -28,6 +28,9 @@ export const LogIn = () => {
       <CardContent className="grid gap-4">
         <Button onClick={() => signIn("github")}>GitHub</Button>
         <Button onClick={() => signIn("azure-ad")}> Microsoft 365</Button>
+        {process.env.NODE_ENV === "development" && (
+          <Button onClick={() => signIn("localdev")}>Basic Auth (DEV ONLY)</Button>
+        )}
       </CardContent>
     </Card>
   );

src/features/auth/auth-api.ts

@@ -2,6 +2,8 @@ import NextAuth, { NextAuthOptions } from "next-auth";
 import { Provider } from "next-auth/providers";
 import AzureADProvider from "next-auth/providers/azure-ad";
 import GitHubProvider from "next-auth/providers/github";
+import CredentialsProvider from "next-auth/providers/credentials";
+import { hashValue } from "./helpers";
 
 const configureIdentityProvider = () => {
   const providers: Array<Provider> = [];
@@ -47,6 +49,39 @@ const configureIdentityProvider = () => {
       })
     );
   }
+
+  // If we're in local dev, add a basic credential provider option as well
+  // (Useful when a dev doesn't have access to create app registration in their tenant)
+  // This currently takes any username and makes a user with it, ignores password
+  // Refer to: https://next-auth.js.org/configuration/providers/credentials
+  if (process.env.NODE_ENV === "development") {
+    providers.push(
+      CredentialsProvider({
+        name: "localdev",
+        credentials: {
+          username: { label: "Username", type: "text", placeholder: "dev" },
+          password: { label: "Password", type: "password" },
+        },    
+        async authorize(credentials, req): Promise<any> {
+          // You can put logic here to validate the credentials and return a user.
+          // We're going to take any username and make a new user with it
+          // Create the id as the hash of the email as per userHashedId (helpers.ts)
+          const username = credentials?.username || "dev";
+          const email = username + "@localhost";
+          const user = {
+              id: hashValue(email),
+              name: username,
+              email: email,
+              isAdmin: false,
+              image: "",
+            };
+          console.log("=== DEV USER LOGGED IN:\n", JSON.stringify(user, null, 2));
+          return user;
+        }
+      })
+    );
+  }
+
   return providers;
 };