@genesislcap/foundation-login v14.177.1
Foundation Login
Introduction
This micro front-end includes a set of identity management functions: authentication (including via SSO) and password reset, for example. Many of the features can be turned on and off as desired, and parts of the login screen (such as the logo) can be customised.
An example of the main login screen:
An example of authentication via SSO:
An example of the change password screen:
Login set-up
:::info
If you build a project upon one of the Genesis seed apps, then the Login
micro front-end will already be set-up for you.
:::
To enable this micro front-end in your application, follow the steps below.
- Add
@genesislcap/foundation-login
as a dependency in your package.json file. Whenever you change the dependencies of your project, always you run the$ npm run bootstrap
command again. You can see more information on the package.json basics page.
{
...
"dependencies": {
"@genesislcap/foundation-login": "latest"
},
...
}
:::note
This page assumes you're using the Routing systems that are part of foundation-ui
, and will cover set-up as part of that routing system.
:::
- In the router configuration for your application, import the
Login
class and theSettings
type. As shown in this example, you might want to importSettings
with an alias to avoid name clashes.
import { Login, Settings as LoginSettings } from '@genesislcap/foundation-login';
- Next you'll want to ensure that your router config uses your
LoginSettings
as its generic type so you can configure the login route.
export class MainRouterConfig extends RouterConfiguration<LoginSettings> {
...
}
- Then add the required config to the router config that you use. For example, you'll want to set up the
Login
class to be used on the/login
route, and pass in its required settings. See customising login.
{ path: '', redirect: 'login' },
{
path: 'login',
element: Login,
title: 'Login',
name: 'login',
layout: loginLayout,
// Login settings that are defined in the LoginSettings type
settings: {
defaultRedirectUrl: 'protected',
public: true,
resetPassword: true,
ssoToggle: true,
ssoEnable: false,
},
childRouters: true,
},
- You'll also want to set up things like the
NavigationContributor
in this class.
:::noteExample An example of this and other required settings for the router configuration with regard to the login system can be found in the example in the API reference. :::
The functionality of the Login class is configured via the settings block on its route, but the other routes will also have customisation on them too. The main options to set here are:
allowAutoAuth
which will log the user back in onto the page when they navigate away if they already have an authenticated sessionpublic
which will indicate that a route doesn't require the user to be authenticated to view
{
path: 'admin',
element: Admin,
title: 'Admin',
name: 'admin',
settings: { allowAutoAuth: true },
},
{
path: 'info',
element: Info,
title: 'Info',
name: 'info',
settings: { public: true },
},
:::warningWarning
By default, a route that isn't marked public is not. However, a non-public route isn't going to block non-authenticated users automatically from viewing them. This must be impelmented in the NavigationContributor
, as shown in the previously mentioned example.
:::
Authentication
For authentication, most configuration is set in the back end. You should familiarise yourself with the authentication section of the back-end.
Username & password
The standard authentication method is the user supplying their username and password. Even when SSO is enabled as an authentication method, the user will still have the option to sign in with their normal credentials.
:::noteTip
Setting the DEFAULT_USER
and DEFAULT_PASSWORD
environment variables will automatically populate the credentials in the login form, which can be useful during development so developers don't need to write out their credentials continuously.
:::
SSO
SSO functionality allows the Login
micro front-end to work with your company's existing authentication system, enabling them to have a single set of credentials - incluidng those built on the Genesis low-code platform. Genesis supports SSO with both JWT and SAML.
Setting up SSO is primarily a back-end task; however, there is a small amount of configuration covered in the customisation part of this documentation.
:::noteInfo
The standard process of SSO is that the SSO authentication provider flow is opened via a redirect in the current page. However, many authentication providers block their system when running in an iframe to prevent clickjacking attacks. Because of this, if the Login
micro front-end detects that it is running in an iframe, it opens up the authentication provider in a popup instead.
:::
Customising login
The Login
micro front-end uses a parameterless constructor. Therefore, the configuration needs to be set via the settings javascript object in the router, as shown in the set-up step. See the full settings API here.
Enabled functionality
In the introduction section, the reset password functionality is shown. However, this flow must be enabled with the resetPassword
option.
Logo
You will probably want to use your company's logo instead of the Genesis logo. A custom logo can be configured with the logoSrc
, logoWidth
, logoHeight
settings. If you don't want to use a logo, you can instead hide the logo with hideLogo
.
Enable SSO
As mentioned in the authentication section, SSO must be configured on the server, but some front-end configuration is required too.
- Setting
ssoToggle
is required to enable the SSO authentication as an option for the user; the user can then enable that flow with a checkbox that controlsssoEnable
. Enabling
ssoEnable
at the route-level sets the SSO flow to be the default.Finally, set
defaultRedirectUrl
, which controls where theLogin
micro front-end will take the user back to once they complete the SSO journey. For example, setting option to/home
will take the user to the/home
path if they successfully login via SSO.
License
Note: this project provides front end dependencies and uses licensed components listed in the next section, thus licenses for those components are required during development. Contact Genesis Global for more details.
2 days ago
2 days ago
4 days ago
4 days ago
5 days ago
4 days ago
5 days ago
5 days ago
9 days ago
11 days ago
12 days ago
13 days ago
16 days ago
16 days ago
17 days ago
17 days ago
18 days ago
19 days ago
23 days ago
23 days ago
23 days ago
26 days ago
26 days ago
27 days ago
27 days ago
27 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
10 months ago
6 months ago
7 months ago
6 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
10 months ago
6 months ago
9 months ago
6 months ago
10 months ago
8 months ago
8 months ago
10 months ago
9 months ago
9 months ago
6 months ago
8 months ago
10 months ago
6 months ago
6 months ago
6 months ago
9 months ago
6 months ago
8 months ago
8 months ago
7 months ago
7 months ago
10 months ago
6 months ago
8 months ago
7 months ago
10 months ago
6 months ago
7 months ago
6 months ago
8 months ago
11 months ago
8 months ago
8 months ago
7 months ago
7 months ago
8 months ago
7 months ago
8 months ago
8 months ago
10 months ago
8 months ago
8 months ago
9 months ago
7 months ago
10 months ago
7 months ago
10 months ago
10 months ago
6 months ago
6 months ago
6 months ago
10 months ago
7 months ago
8 months ago
5 months ago
10 months ago
9 months ago
7 months ago
10 months ago
10 months ago
10 months ago
8 months ago
8 months ago
6 months ago
8 months ago
6 months ago
10 months ago
8 months ago
8 months ago
10 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
8 months ago
8 months ago
10 months ago
6 months ago
10 months ago
9 months ago
8 months ago
8 months ago
8 months ago
9 months ago
6 months ago
10 months ago
7 months ago
6 months ago
6 months ago
10 months ago
9 months ago
9 months ago
6 months ago
6 months ago
11 months ago
8 months ago
11 months ago
10 months ago
11 months ago
10 months ago
10 months ago
10 months ago
6 months ago
6 months ago
10 months ago
7 months ago
10 months ago
7 months ago
10 months ago
9 months ago
6 months ago
9 months ago
6 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
8 months ago
8 months ago
6 months ago
6 months ago
7 months ago
6 months ago
8 months ago
6 months ago
10 months ago
6 months ago
7 months ago
8 months ago
8 months ago
8 months ago
9 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
6 months ago
7 months ago
7 months ago
8 months ago
6 months ago
5 months ago
6 months ago
9 months ago
10 months ago
6 months ago
10 months ago
8 months ago
10 months ago
10 months ago
6 months ago
6 months ago
6 months ago
10 months ago
7 months ago
10 months ago
6 months ago
5 months ago
5 months ago
10 months ago
8 months ago
8 months ago
6 months ago
6 months ago
10 months ago
7 months ago
10 months ago
7 months ago
7 months ago
10 months ago
10 months ago
7 months ago
7 months ago
7 months ago
10 months ago
7 months ago
7 months ago
10 months ago
5 months ago
9 months ago
10 months ago
8 months ago
6 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
10 months ago
6 months ago
7 months ago
7 months ago
10 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
10 months ago
6 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
9 months ago
6 months ago
11 months ago
7 months ago
10 months ago
10 months ago
6 months ago
6 months ago
8 months ago
8 months ago
10 months ago
6 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
6 months ago
8 months ago
7 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
1 year ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
11 months ago
12 months ago
12 months ago
1 year ago
11 months ago
12 months ago
12 months ago
1 year ago
12 months ago
12 months ago
1 year ago
12 months ago
12 months ago
1 year ago
12 months ago
11 months ago
12 months ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago