keiron-login v1.9.2

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