2.2 Saber si un usuario ha iniciado sesión

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

Verás en la referencia de la API del SDK que nuestros ganchos principales siguen esta convención:

const [state, { action1, ... }] = useWhateverVYouHook()

Puedes ver este enfoque como el hook useState del núcleo de ReactJs, pero en lugar de una única función setState, estamos devolviendo un objeto con diferentes funciones y cada una es una única acción o » setState«. Garantizamos que esas acciones no cambiarán al volver a renderizar, por lo que es seguro omitirlas de la lista de dependencias useEffect o useCallback.

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>
      )}
    </>
  )
}

Si el usuario está desconectado

Bien, con useVYouSession sabemos que el usuario no ha firmado, ¡¿cómo le dejamos firmar?! Para cada proveedor de inicio de sesión el SDK expone un botón con propiedades útiles para rastrear las situaciones de éxito o fracaso:

import React, { useCallback } from 'react'
import { VYouServiceError } from './vyou/vyou-core'
import {
  SignInWithAuthButton,
  SignInWithFacebookButton,
  SignInWithGoogleButton
} from './vyou/vyou-react'

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

  return (
    <>
      <SignInWithAuthButton onError={handleError} />
      <SignInWithGoogleButton onError={handleError} />
      <SignInWithFacebookButton 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/vyou-react'

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

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

Si el usuario está activo

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/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 { useVYouSession } from './vyou/vyou-react'

export const MyAppHeader = () => {
  const [, { signOut }] = useVYouSession()

  return (
      <div>
	      <Link to='/home'>Home</Link>
	      <Link to='/account'>Mi cuenta</Link>
	      <a
	        href='#'
	        onClick={ev => {
	          ev.preventDefault()
	          signOut()
	        }}>
	        Salir
	      </a>
      </div>
  )
}
Ir arriba