S
Supabase•4y ago
harshcut

google auth on nextjs

i am using next/router to push to /u/dashboard if there is no error on creating user with google auth. the problem is the redirect reverts back to localhost:3000/# on success. after then a full reload get me to /u/dashboard. 
// /index.tsx (login page)
const withAuthProvider = async () => {
  const { error } = await supabase.auth.signIn({ provider: 'google' })
  if (error) return setToast({ text: error.message, type: 'error' })
  router.push('/u/dashboard')
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { user } = await getUser(context)
  if (user) return { props: {}, redirect: { destination: '/u/dashboard', permanent: false } }
  return { props: {} }
}
// /index.tsx (login page)
const withAuthProvider = async () => {
  const { error } = await supabase.auth.signIn({ provider: 'google' })
  if (error) return setToast({ text: error.message, type: 'error' })
  router.push('/u/dashboard')
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { user } = await getUser(context)
  if (user) return { props: {}, redirect: { destination: '/u/dashboard', permanent: false } }
  return { props: {} }
}
// /u/dashboard.tsx (protected page)
export const getServerSideProps: GetServerSideProps = withPageAuth({
  redirectTo: '/',
  async getServerSideProps(context) {
    const { user } = await getUser(context)
    return { props: { user } }
  },
})
// /u/dashboard.tsx (protected page)
export const getServerSideProps: GetServerSideProps = withPageAuth({
  redirectTo: '/',
  async getServerSideProps(context) {
    const { user } = await getUser(context)
    return { props: { user } }
  },
})
2 Replies
pixtron
pixtron•4y ago
You can set the redirect url: 
const { error } = await supabase.auth.signIn({
  provider: 'google'
}, {
  redirectTo: 'http://localhost:3000/u/dashboard'
})
const { error } = await supabase.auth.signIn({
  provider: 'google'
}, {
  redirectTo: 'http://localhost:3000/u/dashboard'
})
harshcut
harshcutOP•4y ago
didnt work. i am currently using useEffect to redirect when auth state changes. 
  React.useEffect(() => {
    const { data: authListener } = supabaseClient.auth.onAuthStateChange(async (event, session) => {
      await fetch('/api/auth/callback', {
        method: 'POST',
        headers: new Headers({ 'Content-Type': 'application/json' }),
        credentials: 'same-origin',
        body: JSON.stringify({ event, session }),
      })
      if (event === 'SIGNED_IN') {
        router.push('/u/dashboard')
      } else if (event === 'SIGNED_OUT') {
        router.push('/')
      }
    })
    return () => authListener?.unsubscribe()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  React.useEffect(() => {
    const { data: authListener } = supabaseClient.auth.onAuthStateChange(async (event, session) => {
      await fetch('/api/auth/callback', {
        method: 'POST',
        headers: new Headers({ 'Content-Type': 'application/json' }),
        credentials: 'same-origin',
        body: JSON.stringify({ event, session }),
      })
      if (event === 'SIGNED_IN') {
        router.push('/u/dashboard')
      } else if (event === 'SIGNED_OUT') {
        router.push('/')
      }
    })
    return () => authListener?.unsubscribe()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

Did you find this page helpful?