2.2 Knowing if a user signed in

Now that we have everything set up, we’re pretty sure that the first question that comes to your mind is this. In other words: how we’re going to display content depending on the user’s session state? It’s quite simple: we’re going to use the useVYouSession hook. So, whenever user’s session state changes, it will trigger a re-render.

You’ll see in the SDK API reference that our core hooks follow this convention:

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

You can see this approach as the useState core ReactJs hook, but instead of a single setState function, we’re returning an object with different functions and each one is a single action or ” setState“. We guarantee that those actions won’t change on re-renders, so it’s safe to omit them from useEffect or useCallback dependency list.

Let’s see an example that shows different routes depending on the user’s session state:

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

Whether the user is off

Ok, with useVYouSession we know that the user has not signed in, how do we let them sign in?! For each sign provider the SDK exposes a button with useful properties to track both successful or unsuccessful situations:

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

Well, that’s ok for users in your platform, right? So, how do we let potencial users sign up? Easy:

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

Whether the user is on

When we’re developing an application behind an authorization flow, there’re a couple of use cases that are always present:

First: let the user change his / her data or profile. We provide a component for that!

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

Second: let the user sign out:

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>
  )
}
Scroll to Top