feat: auto-login in config capability (#3009)

This is useful when developing/testing, where logging after every change can be cumbersome.

Author: AlessioGr

contributing.md

@@ -49,6 +49,8 @@ The directory split up in this way specifically to reduce friction when creating
 
 The following command will start Payload with your config: `yarn dev my-test-dir`. This command will start up Payload using your config and refresh a test database on every restart.
 
+By default, it will automatically log you in with the default credentials. To disable that, you can either pass in the --no-auto-login flag (example: `yarn dev my-test-dir --no-auto-login`) or set the `PAYLOAD_PUBLIC_DISABLE_AUTO_LOGIN` environment variable to `false`.
+
 If you wish to use to your own Mongo database for the `test` directory instead of using the in memory database, all you need to do is add the following env vars to the `test/dev.ts` file:
 
 - `process.env.NODE_ENV`

src/admin/components/utilities/Auth/index.tsx

@@ -26,6 +26,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     admin: {
       user: userSlug,
       inactivityRoute: logoutInactivityRoute,
+      autoLogin,
     },
     serverURL,
     routes: {
@@ -143,6 +144,28 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
             setUser(json.user);
           } else if (json?.token) {
             setToken(json.token);
+          } else if (autoLogin) {
+            // auto log-in with the provided autoLogin credentials. This is used in dev mode
+            // so you don't have to log in over and over again
+            const autoLoginResult = await requests.post(`${serverURL}${api}/${userSlug}/login`, {
+              body: JSON.stringify({
+                email: autoLogin.email,
+                password: autoLogin.password,
+              }),
+              headers: {
+                'Accept-Language': i18n.language,
+                'Content-Type': 'application/json',
+              },
+            });
+            if (autoLoginResult.status === 200) {
+              const autoLoginJson = await autoLoginResult.json();
+              setUser(autoLoginJson.user);
+              if (autoLoginJson?.token) {
+                setToken(autoLoginJson.token);
+              }
+            } else {
+              setUser(null);
+            }
           } else {
             setUser(null);
           }
@@ -153,7 +176,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     };
 
     fetchMe();
-  }, [i18n, setToken, api, serverURL, userSlug]);
+  }, [i18n, setToken, api, serverURL, userSlug, autoLogin]);
 
   // When location changes, refresh cookie
   useEffect(() => {

src/config/schema.ts

@@ -66,6 +66,14 @@ export default joi.object({
       ),
     logoutRoute: joi.string(),
     inactivityRoute: joi.string(),
+    autoLogin: joi.alternatives()
+      .try(
+        joi.object().keys({
+          email: joi.string(),
+          password: joi.string(),
+        }),
+        joi.boolean(),
+      ),
     components: joi.object()
       .keys({
         routes: joi.array()

src/config/types.ts

@@ -116,7 +116,13 @@ export type InitOptions = {
    * See Pino Docs for options: https://getpino.io/#/docs/api?id=options
    */
   loggerOptions?: LoggerOptions;
-  config?: Promise<SanitizedConfig>
+
+  /**
+   * Sometimes, with the local API, you might need to pass a config file directly, for example, serverless on Vercel
+   * The passed config should match the config file, and if it doesn't, there could be mismatches between the admin UI
+   * and the backend functionality
+   */
+  config?: Promise<SanitizedConfig>;
 };
 
 /**
@@ -275,6 +281,13 @@ export type Config = {
     logoutRoute?: string;
     /** The route the user will be redirected to after being inactive for too long. */
     inactivityRoute?: string;
+    /** Automatically log in as a user when visiting the admin dashboard. */
+    autoLogin?: false | {
+      /** The email address of the user to login as */
+      email: string;
+      /** The password of the user to login as */
+      password: string;
+    }
     /**
      * Add extra and/or replace built-in components with custom components
      *

test/_community/e2e.spec.ts

@@ -2,7 +2,6 @@ import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 import { AdminUrlUtil } from '../helpers/adminUrlUtil';
 import { initPayloadE2E } from '../helpers/configHelpers';
-import { login } from '../helpers';
 
 const { beforeAll, describe } = test;
 let url: AdminUrlUtil;
@@ -16,11 +15,6 @@ describe('Admin Panel', () => {
 
     const context = await browser.newContext();
     page = await context.newPage();
-
-    await login({
-      page,
-      serverURL,
-    });
   });
 
   test('example test', async () => {

test/access-control/e2e.spec.ts

@@ -3,7 +3,6 @@ import { expect, test } from '@playwright/test';
 import payload from '../../src';
 import { AdminUrlUtil } from '../helpers/adminUrlUtil';
 import { initPayloadE2E } from '../helpers/configHelpers';
-import { login } from '../helpers';
 import { restrictedVersionsSlug, readOnlySlug, restrictedSlug, slug, docLevelAccessSlug, unrestrictedSlug } from './config';
 import type { ReadOnlyCollection, RestrictedVersion } from './payload-types';
 import wait from '../../src/utilities/wait';
@@ -37,8 +36,6 @@ describe('access control', () => {
 
     const context = await browser.newContext();
     page = await context.newPage();
-
-    await login({ page, serverURL });
   });
 
   test('field without read access should not show', async () => {

test/admin/e2e.spec.ts

@@ -3,7 +3,7 @@ import { expect, test } from '@playwright/test';
 import payload from '../../src';
 import { AdminUrlUtil } from '../helpers/adminUrlUtil';
 import { initPayloadE2E } from '../helpers/configHelpers';
-import { login, saveDocAndAssert } from '../helpers';
+import { saveDocAndAssert } from '../helpers';
 import type { Post } from './config';
 import { globalSlug, slug } from './shared';
 import { mapAsync } from '../../src/utilities/mapAsync';
@@ -26,8 +26,6 @@ describe('admin', () => {
 
     const context = await browser.newContext();
     page = await context.newPage();
-
-    await login({ page, serverURL });
   });
 
   afterEach(async () => {

test/auth/config.ts

@@ -9,6 +9,7 @@ export const slug = 'users';
 export default buildConfig({
   admin: {
     user: 'users',
+    autoLogin: false,
   },
   collections: [
     {

test/buildConfig.ts

@@ -11,8 +11,11 @@ export function buildConfig(config?: Partial<Config>): Promise<SanitizedConfig>
     },
     ...config,
   };
-
   baseConfig.admin = {
+    autoLogin: process.env.PAYLOAD_PUBLIC_DISABLE_AUTO_LOGIN === 'true' ? false : {
+      email: '[email protected]',
+      password: 'test',
+    },
     ...(baseConfig.admin || {}),
     webpack: (webpackConfig) => {
       const existingConfig = typeof config?.admin?.webpack === 'function'

test/dev.ts

@@ -25,6 +25,10 @@ process.env.PAYLOAD_CONFIG_PATH = configPath;
 
 process.env.PAYLOAD_DROP_DATABASE = 'true';
 
+if (process.argv.includes('--no-auto-login') && process.env.NODE_ENV !== 'production') {
+  process.env.PAYLOAD_PUBLIC_DISABLE_AUTO_LOGIN = 'true';
+}
+
 const expressApp = express();
 
 const startDev = async () => {