Setup Embedded Authentication

To enable and configure Embedded Authentication type:

  1. Navigate to Authentication in Cloud Scale section of the Catalyst console, and click the Set Up option present in the Native Catalyst Authentication section. cloud_scale_auth_empty_screen_native_highlight

  2. Select Embedded Authentication as the type of native authentication method, and click Next. cloud_scale_authenticaiton_embedded_type_select

  3. Enable CSS Customization

    • If you wish to provide a custom CSS for your Confirm Password and Reset Password elements: cloud_scale_auth_embedded_authtype_enable_css_section
      • Provide the file path of where you have stored the required CSS files in your project directory. cloud_scale_auth_embedded_authtype_enable_css_sect_file_path
    • If you are using Embedded Authentication along with Hosted Login, you can inherit styling elements from Hosted Login: cloud_scale_auth_embedded_authtype_styling_inherit
Note: No previews will be made available by Catalyst, for you to view the rendering of your login element, or the Reset Password and Confirm Password pages.
  1. Choose how you wish your login element to be:
  • To load the login element as a conventional login form:

Click the Login Form option in the Configuration step. Copy the script and paste it in the HTML file of your web client that contains the index of your application. cloud_scale_auth_embedded_conv_script_stepper

Note: You can click View Sample Image to view and compare how each of the login forms would appear to the end-user. These are only sample images, not the actual rendering of how the form will appear with your custom styling.
  • To load the login element with only the Social Logins or IdP sign in options:

Click the Social Login-Only Form option in the Configuration step. Copy the script and paste it in the HTML file of your web client that contains the index of your application. cloud_scale_auth_embedded_stepper_social_only_script

Note: The Social Login-Only Form can only be implemented if you have coded your web client application using the latest Catalyst Web SDK. This method is only supported in v4 and not in the earlier versions.

You can access earlier versions of embedded authentication, by clicking and choosing from the Version drop-down. However, ensure that you implement the latest version as this would include upgraded security definitions and enhancements. cloud_scale_auth_embedded_vdropdown

  1. Enable Public Signup if you wish new users to sign up to your application. You can find out more about this from the Public Signup help page. cloud_scale_auth_embedded_public_sign_up
Note: You must enable Public Signup if you want to allow your users to access your application through Social Logins.
  1. You can select the Social Logins and enable them to allow your users to use them and sign up for your applications. You can learn about configuring each social login in detail from the Social Logins help section. cloud_scale_auth_embedded_sociallogins
Note: Ensure that you have Client ID and Client Secret provided by the social login before you configure it here. You can find out about obtaining the Client ID and Client Secret values for each of the social login using this step-by-step guide.
  1. Click Next to save your configurations, and proceed to the Addional Settings section. You can choose to include an additional authentication step by enabling the Custom User Validation option. This option allows you to validate your end-users using a custom logic that you code in a Basic I/O function. You can find out how to set this up in the Whitelisting help document. You can use the Authorized Domains section to authorize external domains to have CORS and iFrame access to your application. You can find out how to set up authorized domains in the Authorized Domain help section. addionalsettingswithauthorized

  2. Click Finish to enable the Embedded Authentication type. cloud_scale_auth_embedded_enabled

You will now be able to view the authentication that you have set up in the Authentication Type section of Authentication.

In this section, you can edit your Social Logins configurations by clicking the required Social Login tile and providing your new OAuth credentials. cloud_scale_auth_embedded_sociallogin_post_edit

You can also edit your CSS Customization configurations:

  1. Click the Edit button. cloud_scale_auth_embedded_customizations_edit

  2. You can provide new custom CSS files, choose to inherit the styling you applied when you set up Hosted Authentication type, or even disable the customization. cloud_scale_auth_embedded_customizations_editing

  3. Click Update. cloud_scale_auth_embedded_customizations_update_show

Your preferences will be rendered. ccloud_scale_auth_embedded_showcase

You can also access the login scripts for embedded authentication at anytime from this section.

Last Updated 2024-01-04 12:16:42 +0530 +0530