Keiron Login

This library provides login and reset-password components useful for all the suites

Setup

• In your front proyect run yarn add keiron-login

• You need to specify 2 additional env vars in your project:

APP_API_URL_KEIRON_LOGIN=
APPLICATION_KEIRON_API_PREFIX_KEIRON_LOGIN=

Example of use

Login

import { Grid, Typography } from "@mui/material"
import Link from "next/link"
import { useAuth } from "common/context"
import { useRouter } from "next/router"
import { Login, UserLogin, ErrorResponse } from "keiron-login"
import { APPLICATION_ID } from "common/config/constants"

function LoginPage(): JSX.Element {
  const router = useRouter()
  const { logIn } = useAuth()

  async function callbackLogin(authorizedUser: UserLogin): Promise<void> {
    logIn(authorizedUser)
    router.push(`/users`)
  }

  async function callbackError(
    error: ErrorResponse,
    { email: string }
  ): Promise<void> {
    //do something with the error
    console.log(error)
  }

  return (
    <Grid container justifyContent="center" alignItems="center">
      <Login
        callbackLogin={callbackLogin}
        application={APPLICATION_ID}
        callbackError={callbackError}
      >
        <Link
          href="/reset-password"
          passHref
          style={{ textDecoration: `none`, cursor: `pointer` }}
        >
          <Typography color="primary" width="100%" textAlign="center">
            ¿HAS OLVIDADO TU CONTRASEÑA?
          </Typography>
        </Link>
      </Login>
    </Grid>
  )
}

export default LoginPage

Reset Password

import { Grid, Typography, useMediaQuery } from "@mui/material"
import Link from "next/link"
import { useSearchParams } from "next/navigation"
import { APPLICATION_ID } from "common/config/constants"
import { ResetPassword, ErrorResponse } from "keiron-login"

function ResetPasswordWrapper(): JSX.Element {
  const searchParams = useSearchParams()
  const tokenParam = searchParams.get(`token`) || ``
  const emailParam = searchParams.get(`email`) || ``

  async function callbackError(error: ErrorResponse, { email }): Promise<void> {
    //do something with the error
    console.log(error)
  }

  return (
    <Grid container justifyContent="center" alignItems="center">
      <ResetPassword
        application={APPLICATION_ID}
        tokenParam={tokenParam}
        emailParam={emailParam}
        callbackError={callbackError}
      >
        <Link
          href="/reset-password"
          passHref
          style={{ textDecoration: `none`, cursor: `pointer` }}
        >
          <Typography color="primary" width="100%" textAlign="center">
            ¿HAS OLVIDADO TU CONTRASEÑA?
          </Typography>
        </Link>
      </ResetPassword>
    </Grid>
  )
}

export default ResetPasswordWrapper

SSO (Single Sign-On)

The SSO flow involves four exports. The user clicks SSOButton → fills in their email in SSO → is redirected to the identity provider → returns to /login?ssoCode=... → useSSOCodeExchange exchanges the code and logs in.

import { useState } from "react"
import { useRouter } from "next/router"
import { useAuth } from "common/context"
import {
  Login,
  SSO,
  SSOButton,
  SSOError,
  useSSOCodeExchange,
  UserLogin,
  ErrorResponse,
} from "keiron-login"
import { APPLICATION_ID } from "common/config/constants"

function LoginPage(): JSX.Element {
  const router = useRouter()
  const { logIn } = useAuth()
  const [showSSO, setShowSSO] = useState(false)

  // Handles the ?ssoCode= query param after the identity provider redirects back
  const { ssoError, clearSSOError } = useSSOCodeExchange({
    login: logIn,
    onSuccess: () => router.push("/"),
    onCodeDetected: () => {
      setShowSSO(true)
      router.replace("/login", undefined, { shallow: true })
    },
  })

  async function callbackLogin(authorizedUser: UserLogin): Promise<void> {
    logIn(authorizedUser)
    router.push("/")
  }

  async function callbackError(
    error: ErrorResponse,
    { email }: { email: string }
  ): Promise<void> {
    //do something with the error
    console.log(error)
  }

  return (
    <Grid container justifyContent="center" alignItems="center">
      {/* Displays exchange errors returned by the SSO callback */}
      <SSOError error={ssoError} onClose={clearSSOError} />

      {showSSO ? (
        <SSO
          application={APPLICATION_ID}
          callbackUri={`${window.location.origin}/login`}
          handleBack={() => setShowSSO(false)}
        />
      ) : (
        <Login
          application={APPLICATION_ID}
          callbackLogin={callbackLogin}
          callbackError={callbackError}
        >
          {/* Renders a button inside the login form that switches to SSO flow */}
          <SSOButton onClick={() => setShowSSO(true)} />
        </Login>
      )}
    </Grid>
  )
}

export default LoginPage

useSSOCodeExchange options:

| Option | Type | Required | Description | |--------|------|----------|-------------| | login | (user: UserLogin) => void | Yes | Your auth context login function | | onSuccess | () => void | No | Called after a successful code exchange (e.g. redirect to home) | | onCodeDetected | () => void | No | Called when ?ssoCode is found in the URL before the exchange starts |

Returns { ssoError: string | null, clearSSOError: () => void }.

SSO props:

| Prop | Type | Required | Description | |------|------|----------|-------------| | application | string | Yes | UUID of the target application | | callbackUri | string | Yes | URI the identity provider redirects back to | | handleBack | () => void | Yes | Called when the user clicks "Volver al inicio" | | applicationColor | string | No | Brand HEX color |

SSOButton props:

| Prop | Type | Required | Description | |------|------|----------|-------------| | onClick | () => void | Yes | Click handler | | textColor | string | No | HEX color for text and icon (default: #3F51B5) | | text | string | No | Button label (default: iniciar sesión con tu organización) |