2.2 Saber si un usuario ha iniciado sesión

Ahora que lo tenemos todo montado, estamos bastante seguros de que la primera pregunta que te viene a la cabeza es esta. En otras palabras: ¿cómo vamos a mostrar el contenido Ahora que tenemos todo configurado, estamos bastante seguros de que la primera pregunta que te viene a la cabeza es esta. En otras palabras: ¿cómo vamos a mostrar el contenido dependiendo del estado de la sesión del usuario? Es muy sencillo: vamos a utilizar el hook useSession. Así, cada vez que el estado de la sesión del usuario cambie, se activará un re-renderizado.

Veamos un ejemplo que muestra diferentes rutas dependiendo del estado de la sesión del usuario:

import React from 'react'
import { HashRouter, Redirect, Route, Switch } from 'react-router-dom'
import { useVYouSession } from './vyou/vyou-react'

export const Routes = () => {
  const [session] = useVYouSession()

  return (
    <>
      {!session.signedIn && (
        <HashRouter>
          <Switch>
            <Route exact path='/login'>
              { /* my login screen */ }
            </Route>
            <Route path='*'>
              <Redirect to='/login' />
            </Route>
          </Switch>
        </HashRouter>
      )}
      {session.signedIn && (
        <HashRouter>
          <Switch>
						{ /* my protected routes */ }
          </Switch>
	      </HashRouter>
      )}
    </>
  )
}

Registrarse/acceder

Vale, con useSession sabemos que el usuario no ha iniciado sesión, ¡¿cómo le dejamos iniciar sesión?!

import React, { useCallback } from 'react'
import { VYouServiceError } from './vyou-core'
import { AuthButtons } from './vyou-react'

export const LoginScreen = () => {
  const handleError = useCallback((error: VYouServiceError) => {
    console.error(error)
  }, [])

  return <AuthButtons onError={handleError} />
}

Bueno, eso está bien para los usuarios de tu plataforma, ¿no? Entonces, ¿cómo dejamos que los usuarios potenciales se registren? Fácil:

import React from 'react'
import { useHistory } from 'react-router-dom'
import { MyCustomerForm } from './vyou-react'

export const SignUpScreen = () => {
  const history = useHistory()

  return (
    <MyCustomerForm
      mode="signUp"
      onSuccess={() => {
        history.replace('/home')
      }}
      onError={(err) => {
        console.error(err)
      }}
    />
  )
}

Usuarios activos

Cuando desarrollamos una aplicación detrás de un flujo de autorización, hay un par de casos de uso que siempre están presentes:

Primero: dejar que el usuario cambie sus datos o su perfil. ¡Proporcionamos un componente para eso!

import React from 'react'
import { MyCustomerForm } from './vyou-react'

export const AccountScreen = () => {
  return (
    <MyCustomerForm
      mode="edit"
      onSuccess={() => {
        console.log('We can show some visual feedback now, right?')
      }}
      onError={(err) => {
        console.error(err)
      }}
    />
  )
}

Segundo: dejar que el usuario cierre sesión:

import React from 'react'
import { useSignOut } from './vyou-react'

export const MyAppHeader = () => {
  const signOut = useSignOut()

  return (
    <div>
      <Link to="/home">Home</Link>
      <Link to="/account">My account</Link>
      <a
        href="#"
        onClick={(ev) => {
          ev.preventDefault()
          signOut(true) // we'll force sign out if an error occurs
        }}
      >
        Sign out
      </a>
    </div>
  )
}
Ir arriba