How to configure APEX to use my custom login page.

About

This is my version of a single login page which contains login, registration, and forgot password functionality. All of this is inspired (heavily borrowed) from this post by Dimitri Gielis.

The custom login form requires ArcSQL.

📬

The login form needs the ability to send email using ArcSQL. You will need to make sure you configure email with APEX in Oracle Cloud or sign-up for SendGrid and use a token.

🚨

The dependencies above are subject to breaking changes. This article is for learning purposes only. Feel free to borrow from anything you see and make it your own.

Install SAAS_AUTH

💾 Download this is the code and other objects you will need to support custom authentication.

Login as the application owner (often the same user you used to install ArcSQL) and run the saas_auth_install.sql script. If there are errors, correct, and try to re-run. You should be able to run the script without errors.

image

↗️ Import the SAAS AUTH app into your workspace.

Import the SAAS AUTH application using the saas_auth_apex_app.sql file. You will then create a new page in your target application by copying the login form from SAAS AUTH app and also copying the saas_auth authentication scheme. Make the saas_auth authentication scheme the current authentication scheme for you application.

🚮 Delete or rename the page alias for the default login page.

You can either delete the default login page or change the alias to something other than "login". The new login page will use the alias "login" and you can not have two pages with the same alias. You may need to change the page alias for the custom login form from "log-in" to "login".

Set the authentication function name.

⚙️ Add references to the Orange CSS library.

This is an optional step. The login form plays around with the CSS a bit and you will need to make some of your own corrections/changes here if you do not implement Orange CSS. Also note the references shown below may have more current versions available.

Add the URL to orange.min.js as shown below.

image

Add the URL to orange.min.css as shown below.

image