[solved] dbAuth & login redirect

Get Help and Help Others
9

awesome, this inspired me to write a custom hook useAuthWithRedirectTo() that wraps useAuth and can be used on any page that needs access to redirect

// useAuthWithRedirectTo.ts
import { useEffect } from 'react'
import { navigate, routes, useLocation } from '@redwoodjs/router'
import { useAuth } from '@redwoodjs/auth'

export const useAuthWithRedirectTo = () => {
  const { search } = useLocation()
  const { isAuthenticated, ...rest } = useAuth()

  const hasRedirectTo = /redirectTo/.test(search)
  const redirectTo = search
    .replace('?redirectTo=', '')
    .replace(/&\S+=\S[&^]/g, '') // get rid of any other query params

  useEffect(() => {
    if (isAuthenticated) {
      if (hasRedirectTo) {
        navigate(redirectTo)
      } else {
        navigate(routes.home())
      }
    }
  }, [isAuthenticated, hasRedirectTo, redirectTo, search])
  return { ...rest, isAuthenticated, redirectTo }
}

I’m using it in both my signup and login pages like this, so i can pass the redirect onto login or signup page, respectively:

// LoginPage.tsx
import { useAuthWithRedirectTo } from '../../hooks/useAuthWithRedirectTo'

const LoginPage = () => {
  const { redirectTo, logIn } = useAuthWithRedirectTo()
 //...
  return (
   {/*...*/}
     <Link
        to={routes.signup(redirectTo ? { redirectTo } : undefined)}
      >
        Sign up
      </Link>
   {/*...*/}
  )
4 Likes