foundation-login.login

Home > @genesislcap/foundation-login > Login

Login class

Warning: This API is now obsolete.

• Please use foundation-auth instead.

Defines the login class which handles account authentication from the front-end

Signature:

export declare class Login extends FASTElement 

Extends: FASTElement

Remarks

Add the Login class as a router element, and it will handle the account authentication for you. Requires use of @genesislcap/foundation-comms for the and classes.

There are a lot of configuration options available, and different authentication types (such as login via SSO). Use the modules exported configure and define functions for more power.

Example

The following is an example of using it in your app, setting it up in the router configuration. This isn't a complete routes confutation, but it contains all required configuration in regard to adding Login functionality.

// Import required dependencies from the foundation-login package
import { Login } from '@genesislcap/foundation-login';
// Import required dependencies from the foundation-comms package
// You could also import analytics events and set them up in the NavigationContributor
import { Auth, Session } from '@genesislcap/foundation-comms';

type RouterSettings = {
  public?: boolean;
  autoAuth?: boolean;
}

// Define your router config
export class MainRouterConfig extends RouterConfiguration<RouterSettings> {
  // Ensure you inject in required dependencies
  constructor(
    @Auth private auth: Auth,
    @Session private session: Session
  ) {
    super();
  }

  // Add Login as a route
  public configure() {
    ...
    this.routes.map(
      { path: '', redirect: 'login' },
      {
        path: 'login',
        element: Login,
        title: 'Login',
        name: 'login',
        layout: loginLayout,
        settings: { public: true },
        childRouters: true,
      },
      ... // Other routes config here
    );

    const session = this.session;
    const auth = this.auth;

    // Example of a FallbackRouteDefinition
    this.routes.fallback(() =>
      auth.isLoggedIn ? { redirect: 'not-found' } : { redirect: 'login' }
    );

     // Example of a NavigationContributor
    this.contributors.push({
      navigate: async (phase) => {
        const settings = phase.route.settings;

        // Could add in processes such as analytics here

        // If public route don't block
        if (settings && settings.public) {
          return;
        }

        // If logged in don't block
        if (auth.isLoggedIn) {
          return;
        }

        // If autoAuth and session is valid try to connect+auto-login
        if (settings && settings.autoAuth && (await auth.reAuthFromSession())) {
          return;
        }

        // Otherwise route them to login
        phase.cancel(() => {
          session.captureReturnUrl();
          Route.name.replace(phase.router, 'login');
        });
      },
    });
  }

  ... // Other configuration/methods

}