Example: Create a Custom Visualforce Login Page from a Github Project

When creating custom code for your login page, it’s often helpful to start out with an existing example for guidance. Salesforce Identity provides a Github custom login page project that you can modify. The project includes custom Visualforce pages and Apex controllers.

Required Editions

Available in: Salesforce Classic and Lightning Experience

Available in: Enterprise, Performance, Unlimited, and Developer Editions

User Permissions Needed
To create and edit Visualforce pages:	Customize Application
To edit Apex classes:	Author Apex AND Customize Application

Note Only LWR sites configured with a Visualforce login page before Summer ’23 and Aura sites can use a custom Visualforce login page.

1. On Github, locate the Salesforce Identity custom login page project.
   1. Download the project to your computer.
   2. Upload the zipped _include directory from the project to Salesforce as a static resource called include with Cache Control set to Public.
   3. Create a field set named Registration to contain the user information for your site members, such as the user’s name, company name, and email.
   4. If you want to set up an Auth. provider for social sign-on, create a custom URL field on the User object.
2. Install the Apex controllers and Visualforce pages from the Github project to your org according to the project’s README.
3. Make your Visualforce pages available publicly.
   1. From Experience Workspaces, select Administration, select Pages, and then click Go to Force.com.
   2. Click Public Access Settings.
   3. Under Enabled Visualforce Page Access, click Edit.
   4. Select the Visualforce pages you created, add them to Enabled Visualforce Pages, and save your changes.
      
4. Replace the site’s default pages with your new Visualforce pages.
   1. From Experience Workspaces, select Administration, and then select Login & Registration.
   2. Under Login, select Visualforce for the page type, enter the name of your Visualforce page in the search field, and click .
   3. In the search results window, click the name of your page to select it, and click Save.

   To revert to the default page, select Default Page.

5. View your custom login page from a browser in private mode.
6. Make it your own.