UX-AUTH-SA

This article will explain the code within the UX-AUTH-SA authentication project. It is a self-contained project that enables a consistent standalone authentication experience across multiple platforms. It contains a single Index page, page layout, and the Imports required to support them.

MainLayout

The main layout is used to set up the notifications for the application. At the top it adds the telerik notification component and sets the position to the center top. In the middle, it adds the cascading notification parameter. At the bottom, it creates the notification class.

@inherits LayoutComponentBase

<TelerikNotification @ref="@Notification.Instance" 
                     AriaLabel="Notification"
                     HorizontalPosition="@NotificationHorizontalPosition.Center"
                     VerticalPosition="@NotificationVerticalPosition.Top"
                     Class="PopupNotification">
</TelerikNotification>

<CascadingValue IsFixed="true" Value="@Notification">
    <TelerikRootComponent>
        <div class="page">
            <div class="main">
                @Body
            </div>
        </div>
    </TelerikRootComponent>
</CascadingValue>

@code{
    Notification Notification { get; set; } = new Notification();
}

Index page

The Index page is the primary landing page of the application. It’s purpose is to sign into an existing account, sign up a new account, or reset your password if you forgot it.

All pages outside of a workspace are fully configurable through the Landing Page Configuration (LPC) application in the Server Owner workspace. Depending on the LPC being used, the layout and style of the landing pages will vary.

The Index page will display the Sign In component initially, allowing navigation to Sign Up or Reset Password components through applicable buttons.

Component Code

Below are the various method used by this component and their purpose.

OnInitializedAsync()

This method is on the initial load before the component is rendered. It performs the following actions:

• It initializes the AppState.URLParameters object.
• It applies default theme styles by invoking JavaScript interop methods to update the link stylesheets.
• It sets the display type of the application based on the device idiom.
• Gets the display orientation of the device and registers to the orientation change event
• It sets the NewAPITarget variable to the base address of the HTTP client.
• It handles the URLParams parameter, checking if it starts with “SIGNUP” and setting the AppState.SignUpRequired flag accordingly.
• It parses a configuration value into a Guid and assigns it to AppState.URLParameters.LandingPageConfigurationKey.
• It calls an API using the URLParameterClient to retrieve the URL parameters and assigns the result to AppState.URLParameters.
• It sets the AppState.URLParameters.IndexContentPosition to “Bottom” if it is not already set to “Top” or “Bottom” and the display type is “Phone”.
• It checks the AppState.URLParameters.ActionName and sets the AppState.UserJoining flag to true for specific action names.
• It navigates to the “Workspaces” page if the user is already authenticated, otherwise it calls AppState.SetServerConfiguration() and awaits its completion.
• It calls the UserChanged() method to trigger a state change in the component.
• It sets the IsReadyToRender flag to true.
• Finally, it calls the base OnInitializedAsync() method.

UserChanged()

This method is called when the state of the user has changed. Its purpose is to simply call StateHasChanged() to reload the components on the page.

ChangeAPITarget()

This method is called when the Change API Target button is selected. Its purpose is to change the API the application uses. This is only available in the DEV environment.

DisposeSignIn(DotNetObjectReference<SignIn> signInObjRef)

This method is called when the Sign In component is unloaded an needs to be disposed. Its purpose is to dispose the Sign In component.

DisposeResetPassword(DotNetObjectReference<ResetPassword> resetPasswordObjRef)

This method is called when the Reset Password component is unloaded an needs to be disposed. Its purpose is to dispose the Reset Password component.

DisposeSignUp(DotNetObjectReference<SignUp> signUpObjRef)

This method is called when the Sign Up component is unloaded an needs to be disposed. Its purpose is to dispose the Sign Up component.

Reset Password

The Reset Password component is displayed on the Index page. Appearance can be configured for this component in the LPC.

Component Code

Below are the various method used by this component and their purpose.

OnInitializedAsync()

This method is on the initial load before the component is rendered. Its purpose is to override the AppState.URLParameters.ResetPasswordContentPosition to “Top” if the user is on a mobile device and the original position is “Left” or “Right”.

RevealPasswordButtonClicked()

This method is called when the Show Password button is selected. Its purpose is to reveal the password that was entered to ensure there are no typos.

SecurityAnswerChanged()

This method is called when the value in the Security Answer field changes. Its purpose is to display an error message if the value of the field is empty.

NewPasswordChanged()

This method is called when the New Password field is changed. Its purpose is to validate the new password meets our security requirements, if it doesn’t a validation message will be displayed.

ConfirmPasswordChanged()

This method is called when the Confirm Password field is changed. Its purpose is to validate the confirm password matches the value of the new password, if it doesn’t a validation message will be displayed.

EmailChanged()

This method is called when the Email field value changes. Its purpose is to validate the value is a properly formatted email address, if it’s not a valid email a validation message will be displayed.

VerifyEmailAddress()

This method is called when the verify email button is selected. Its purpose is to validate the account exists to display follow up fields to validate account ownership.

ResetPasswordBtnOnClick()

This method is called when the reset password button is selected. Its purpose is to validate the all the fields are populated and make an API call to reset the password where all the inputs will be validated first. If anything fails a notification will be displayed.

OnCloseHandler()

This method is called when the reset password component is ready to be disposed. Its purpose is to reset needed values and make a call to the dispose method in the parent component.

DisposeMFA(DotNetObjectReference<MultiFactorAuthentication> MFAObjRef)

This method is called when the Multi Factor Authentication component is ready to be disposed. Its purpose is to finish disposing the component.

Sign In

The Sign In component is displayed on the Index page. Appearance can be configured for this component in the LPC.

Component Code

Below are the various method used by this component and their purpose.

OnInitializedAsync()

This method is on the initial load before the component is rendered. Its purpose is to override the AppState.URLParameters.SignInContentPosition to “Top” if the user is on a mobile device and the original position is “Left” or “Right”.

SignInUser()

This method is called when the Sign In button is selected. Its purpose is to make an API call to sign in the user based on the username and password combination provided. If MFA is being used then before the user is signed in they will be required to enter a security code sent to their registered MFA device.

OnCloseHandler(string command)

This method is called when the sign in component is ready to be disposed. Its purpose is to reset needed values and make a call to the dispose method in the parent component.

Sign Up

The Reset Password component is displayed on the Index page. Appearance can be configured for this component in the LPC.

Component Code

Below are the various method used by this component and their purpose.

OnParametersSetAsync()

This method is called when there is a state change to this component. Its purpose is to override the AppState.URLParameters.ResetPasswordContentPosition to “Top” if the user is on a mobile device and the original position is “Left” or “Right” and determine if the TOS checkbox needs to be rendered.

EmailChanged()

This method is called when the Email field value changes. Its purpose is to validate the entered value is a properly formatted email address, if it’s not then a validation message will be displayed.

ConfirmEmailChanged()

This method is called when the value in the confirm email field changes. Its purpose is to display an error message if the value of the field does not match the value of the email field.

PasswordChanged()

This method is called when the Password field is changed. Its purpose is to validate the password meets our security requirements, if it doesn’t a validation message will be displayed.

ConfirmPasswordChanged()

This method is called when the value in the confirm password field changes. Its purpose is to display an error message if the value of the field does not match the value of the password field.

FirstNameChanged()

This method is called when the First Name field value changes. Its purpose is to validate the value is not empty, if it’s empty a validation message will be displayed.

LastNameChanged()

This method is called when the Last Name field value changes. Its purpose is to validate the value is not empty, if it’s empty a validation message will be displayed.

SecurityQuestionChanged()

This method is called when the Security Question field value changes. Its purpose is to validate the value is not empty, if it’s empty a validation message will be displayed.

SecurityAnswerChanged()

This method is called when the Security Answer field value changes. Its purpose is to validate the value is not empty, if it’s empty a validation message will be displayed.

SignUpButtonClicked()

This method is called when the sign up button is selected. Its purpose is to validate all input fields then make an API call to sign up the user if there were not validation errors.

ShowTOSWindow()

This method is called when the Terms of Service or Privacy Policy buttons are selected. Its purpose is to open a popup window that displayed the terms of service or privacy policy.

AddAdditionalMFA()

This method is called when the Yes button is selected to add an additional MFA target during sign up. Its purpose is to display the GetAdditionalMFAInformation component to add an additional MFA target.

ValidateEmailAddress()

This method is called when the validate email button is selected when using MFA. Its purpose is to validate ownership of the entered email and ensure there isn’t an account already using that email.

RevealPasswordButtonClicked()

This method is called when the show password button is selected. Its purpose is to reveal the entered password to ensure there are no typos.

OnCloseHandler()

This method is called when the Sign Up component is ready to be disposed. Its purpose is to reset some values and notify the parent component to finish disposing the component.

DisposeMFA()

This method is called when the Multi Factor Authentication component is ready to be disposed. Its purpose is to finish disposing the component.

DisposeAdditionalMFA()

This method is called when the Get Additional Multi Factor Authentication component is ready to be disposed. Its purpose is to reset some values and navigate the user to the Workspaces page.

Proceed()

This method is called when the No button is selected on the add additional MFA target screen. Its purpose is to finish the sign up process and navigate the user to the Workspaces page.