Replacing Login View

ithoman3 months ago

6

• 

  tyteen4a033 months ago

  Can you show us your code?

• 

  ithoman3 months ago

  Sure, I just didn't wnat to start by dumping code in the wrong place, if here is the right place to ask the question and provide the code, I'm happy to post it here. I always want to ask the community

  first

  before spamming the board with long detailed texts.

  
  
  

  So my attempt so far... First a basically empty login view (just to see if I can get the view replaced... I can add the logic I need to the page later)...

  
  
  

  // src/next-backend/views/Login/index.tsx
  import type { AdminViewProps } from 'payload'
  
  import React, { Fragment } from 'react'
  
  export const LoginView: React.FC<AdminViewProps> = ({ initPageResult, params, searchParams }) => {
    return (
      <Fragment>
        <div className={`login-view`}>
          <div>Custom Login View</div>
        </div>
      </Fragment>
    )
  }

  
  
  

  Then for my payload config:

  
  
  

  export const config = buildConfig({

  
  

  admin: {

  
  

  // ... other setup

  
  

  components: {

  
  

  // components

  
  

  views: {

  
  

  login: {

  
  

  Component: '/views/Login/index#LoginView',

  
  

  path: '/admin/login',

  
  

  },

  
  

  dashboard: {

  
  

  Component: '/views/RootAdmin#RootAdminView',

  
  

  },

  
  

  },

  
  

  },

  
  

  // ... more other setup

  
  

  }

  
  

  });

  
  
  

  I have tried both path: '/login' (in case it was defaulting to /admin/..." and the current attempt '/admin/login'

  
  
  

  Neither have any effect.

  
  
  

  All I get it is the base (system default) login view.

• 

  tyteen4a033 months ago

  Actually looking at it now I don't think it's possible to swap the login page completely outright

  
  
  

  would customizing beforeLogin and afterLogin be sufficient?

• 

  aaronksaunders3 months ago

  I didn’t replace the login view in a project I created but I did add a new admin view for creating and account. There might be something helpful to you in the project source code

  https://github.com/aaronksaunders/payload-custom-admin-create-user-view-app
• 

  ithoman3 months ago

  Okay, actually I figured it out... and there is a way to do it ... but it's a two step process.

  
  
  

  To be honest, I discovered this after I realized that most everything is shut down if I "disableLocalStrategy".

  
  
  

  To be honst just learning about "disableLocalStrategy" would have been enough as it removes the existing form on the login page.

  
  
  

  However, I had already figured it out and this has a now cleaner look because this also replaced the Payload logo. There may be another config option that would have replaced that but honestly I don't want to go spelunking for it.

  
  
  

  Anyway, replacing the page let's me own it and is good for true white labeling.

  
  
  

  SO... here was what I found:

  
  
  

  First define a custom login "route" this basically says don't go to "/admin/login" when logging in go to this route.

  
  
  

  Then you can own that route and replace it with your on functionality.

  
  
  

  One more thing if you really want to remove the old route (but this is completely optional) if you truly want to get rid of the old route "/admin/auth" which not strictly needed if you "disableLocalStrategy" as it can no longer be used. Further your strategy will not let it do anything for admin.

  
  
  

  But if you have a hyper focused security team (like my client) you can "if you run custom server, as we do", you can intercept the old route "/admin/login" and redirect to the new route "/admin/auth". However, I stress this is really not needed because the old login page can do nothing now that you have "disableLocalStrategy". But it's an option if you really need it.

  
  
  

  admin: {

  
  

  routes: {

  
  

  login: '/auth/login',

  
  

  },

  
  

  components: {

  
  

  // components

  
  

  views: {

  
  

  login: {

  
  

  Component: '/views/LoginView#LoginView',

  
  

  path: '/auth/login',

  
  

  },

  
  

  ...

  
  

  }

• 

  tyteen4a033 months ago

  Yeah the logo can be replaced very easily

  
  
  

  What I do to hide the existing login form (I don't care if people try to brute force reverse engineer that) is via css