@startupjs/auth

import { useState } from 'react' import { AuthForm, LogoutButton, onLogout } from '../' import { AuthButton as GoogleAuthButton } from '@startupjs/auth-google' import { AuthButton as LinkedinAuthButton } from '@startupjs/auth-linkedin/client' import { LoginForm, RegisterForm, RecoverForm } from '@startupjs/auth-local' import { Button } from '@startupjs/ui'

Authorization

Requirements

@react-native-cookies/cookies: >= 6.0.6
@startupjs/ui: >= 0.33.0
startupjs: >= 0.33.0

Init on server

import { initAuth } from '@startupjs/auth/server'

In the body of the startup js Server function, the module is initialized, and strategies are added to strategies, each with its own set of characteristics:

initAuth(ee, {
  strategies: [
    new LocalStrategy({}),
    new FacebookStrategy({
      clientId: conf.get('FACEBOOK_CLIENT_ID'),
      clientSecret: conf.get('FACEBOOK_CLIENT_SECRET')
    })
  ]
})

Micro frontend

Test example (apple and azure keys are hidden from public access and need to be added manually)

These are ready-made pages with forms that can be connected to the site

To use them, you need in the file Root/index.js (or where startupjs/app is used), init the micro frontend and put it in the App component

First, you need the initializer function, which accepts the necessary options:

import { initAuthApp } from '@startupjs/auth'

Its main options are socialButtons and localForms, which collect the necessary components for a common form. Since it is not known in advance which strategies should be connected, you have to connect them yourself. There are buttons for almost every strategy, except for the local one, to see what components exist for auth-local, there is a separate description for this strategy (in fact, as for all others).

Import the necessary components:

import { AuthButton as AzureadAuthButton } from '@startupjs/auth-azuread'
import { AuthButton as LinkedinAuthButton } from '@startupjs/auth-linkedin'
import { LoginForm, RegisterForm, RecoverForm } from '@startupjs/auth-local'

Everything is based on a local strategy. It has 3 standard forms: Authorization, Registration, Password Recovery. Inside the module, there is logic for switching between these forms. Microfrontend has 3 mandatory routes for the local strategy: 'sign-in', 'sign-up' и 'recover', actually, when using a local form, you always need to install components with forms using these keys.

const auth = initAuthApp({
  localForms: {
    'sign-in': <LoginForm />,
    'sign-up': <RegisterForm />,
    'recover': <RecoverForm />
  },
  socialButtons: [
    <AzureadAuthButton />,
    <LinkedinAuthButton />
  ]
})

When the microfrontend is generated, you just need to pass it to the App

App(apps={ auth, main })

Microfrontend customization

You can change the Layout. For example, the site has its own header, logo, background, etc. To do this, you can throw a custom Layout in the microfrontend options:

const auth = initAuthApp({
  Layout,
  localForms: {
    'sign-in': <LoginForm />,
    'sign-up': <RegisterForm />,
    'recover': <RecoverForm />
  }
})

Since jsx is thrown in localForms and socialButtons, all components can be modified as usual:

const auth = initAuthApp({
  Layout,
  localForms: {
    'sign-in': <LoginForm
      properties={{
        age: {
          input: 'number',
          label: 'Age',
          placeholder: 'Enter your age'
        }
      }}
      validateSchema={{
        age: Joi.string().required().messages({
          'any.required': 'Fill in the field',
          'string.empty': 'Fill in the field'
        })
      }}
    />,
    'sign-up': <RegisterForm />,
    'recover': <RecoverForm />
  },
  socialButtons: [
    <GoogleAuthButton
      label='Sign in with Google'
    />,
    <FacebookAuthButton
      label='Sign in with Facebook'
    />
  ]
})

More information about customizing these components is described on the pages with the necessary strategies

If you need to change the standard headers and make your own markup, you can use the renderForm function:

const auth = initAuthApp({
  Layout,
  localForms: {
    'sign-in': <LoginForm />,
    'sign-up': <RegisterForm />,
    'recover': <RecoverForm />
  },
  socialButtons: [
    <GoogleAuthButton />,
    <FacebookAuthButton />
  ],
  renderForm: function ({
    slide,
    socialButtons,
    localActiveForm,
    onChangeSlide
  }) {
    return pug`
      Div
        H5= getCaptionForm(slide)
        = socialButtons
        Div(style={ marginTop: 16 })
          = localActiveForm
    `
  }
})

It gets the forms that are declared, and the current slide

Common component

General form with the necessary types of authorization Everything is the same as for the microfrontend, but there are no routes, and you need to configure the slide switching yourself

import { AuthForm } from '@startupjs/auth'

const [slide, setSlide] = useState('sign-in')

return (
  <AuthForm
    slide={slide}
    localForms={{
      'sign-in': <LoginForm />,
      'sign-up': <RegisterForm />,
      'recover': <RecoverForm />
    }}
    socialButtons={[
      <GoogleAuthButton label='Sign in with Google' />,
      <LinkedinAuthButton />
    ]}
    onChangeSlide={slide=> setSlide(slide)}
  />
)

Helpers and server hooks

Exit button

import { LogoutButton } from '@startupjs/auth'
...
return <LogoutButton />

Exit helper

import { onLogout } from '@startupjs/auth'
...
return <Button onPress={onLogout}>Выйти</Button>

onBeforeLoginHook

Helper-middleware, called before authorization

initAuth(ee, {
  // ...
  onBeforeLoginHook: ({ userId }, req, res, next) => {
    console.log('onBeforeLoginHook')
    next()
  },
  // ...
}

onAfterUserCreationHook

Helper-middleware, called after the user is created

initAuth(ee, {
  // ...
  onAfterUserCreationHook: ({ userId }, req) => {
    console.log('onAfterUserCreationHook')
  },
  // ...
}

onAfterLoginHook

Helper-middleware, called after authorization

initAuth(ee, {
  // ...
  onAfterLoginHook: ({ userId }, req) => {
    console.log('onAfterLoginHook')
  },
  // ...
}

onBeforeLogoutHook

Helper-middleware, called before exiting

initAuth(ee, {
  // ...
  onBeforeLogoutHook: (req, res, next) => {
    console.log('onBeforeLogoutHook')
    next()
  },
  // ...
}

Redirect after authorization

To set up a redirect, you need to throw the redirectUrl prop in initAuthApp, either for AuthForm, or for a separate button or form, for example: <GoogleAuthButton redirectUrl='/profile/google' /> <LoginForm redirectUrl='/profile/local' />

The redirect works through cookies, and if you put something in a cookie named redirectUrl before authorization, then a redirect to value from the cookie will occur after it:

  import { CookieManager } from '@startupjs/auth'

  CookieManager.set({
    baseUrl,
    name: 'authRedirectUrl',
    value: redirectUrl,
    expires: moment().add(5, 'minutes')
  })

You can also override the redirect on the server (for example, in the onBeforeLoginHook hook):

  onBeforeLoginHook: ({ userId }, req, res, next) => {
    // req.cookies.authRedirectUrl = '/custom-redirect-path'
    next()
  }