[help] custom sign-up and sign-in pages

Francisco "Klogan" Barros · 2024-08-19T20:32:14.374Z

Hey folks. I am currently implementing passwordless sign-up and sign-in with custom screens. Using Forms. I have an issue: - When users are on the sign-in page, insert their email on the input field and submit the form, if the email is unknown to Kinde the user is redirect to Kinde's sign-in page (the one that can be customized through the Kinde website which I do not want to render). Ideally, I would like to show an error on the Form or even better redirect the user to the sign-up page (the one that exists within the source code project). **How can this be achieved?**

I

IkiTg07•8/20/24, 10:30 AM

Hey, can you answer just a few questions first please :

What sdk and version are you using

Can you share a snippet of your code
Have you enable the

Use your own sign-up and sign-in screens

Use your own sign-up and sign-in screens

Use your own sign-up and sign-in screens

Use your own sign-up and sign-in screens

flag in your application

F

Francisco "Klogan" BarrosOP•8/20/24, 8:16 PM

Hello

@kinde-oss/kinde-auth-react@4.0.1

Have you enable the "Use your own sign-up and sign-in screens"?
Yes, I did.

Full relevant code is below (two files).

F

Francisco "Klogan" BarrosOP•8/20/24, 8:16 PM

import { useKindeAuth } from '@kinde-oss/kinde-auth-react'
import { createFileRoute } from '@tanstack/react-router'
import { Heading } from '@zenif/react-web-components-v2'
import { useId } from 'react'
import { VStack } from '../../styled-system/jsx'
import { UiLink } from '../components/ui/link/UiLink'
import { SignInForm } from '../features/auth/sign-in/SignInForm'
import { appConfig } from '../shared/appConfig'

const Route = createFileRoute('/_anonymous/sign-in')({
  component: SignInPage,
})

function SignInPage() {
  const formId = useId()

  const { login } = useKindeAuth()

  return (
    <VStack alignItems="center" justifyContent="center" rowGap="3">
      <Heading as="h2" size="4xl" fontWeight="normal">
        Sign in to <strong>ZENIF</strong> business portal
      </Heading>
      <SignInForm
        id={formId}
        onSubmit={(vars) => {
          login({
            authUrlParams: {
              connection_id: appConfig.kinde.connectionIds.passwordless,
              login_hint: vars.email,
            },
          })
        }}
      />
      <UiLink to="/sign-up">Don't have an account? Sign up.</UiLink>
    </VStack>
  )
}

export { Route }

import { useKindeAuth } from '@kinde-oss/kinde-auth-react'
import { createFileRoute } from '@tanstack/react-router'
import { Heading } from '@zenif/react-web-components-v2'
import { useId } from 'react'
import { VStack } from '../../styled-system/jsx'
import { UiLink } from '../components/ui/link/UiLink'
import { SignInForm } from '../features/auth/sign-in/SignInForm'
import { appConfig } from '../shared/appConfig'

const Route = createFileRoute('/_anonymous/sign-in')({
  component: SignInPage,
})

function SignInPage() {
  const formId = useId()

  const { login } = useKindeAuth()

  return (
    <VStack alignItems="center" justifyContent="center" rowGap="3">
      <Heading as="h2" size="4xl" fontWeight="normal">
        Sign in to <strong>ZENIF</strong> business portal
      </Heading>
      <SignInForm
        id={formId}
        onSubmit={(vars) => {
          login({
            authUrlParams: {
              connection_id: appConfig.kinde.connectionIds.passwordless,
              login_hint: vars.email,
            },
          })
        }}
      />
      <UiLink to="/sign-up">Don't have an account? Sign up.</UiLink>
    </VStack>
  )
}

export { Route }

import { useKindeAuth } from '@kinde-oss/kinde-auth-react'
import { createFileRoute } from '@tanstack/react-router'
import { Heading } from '@zenif/react-web-components-v2'
import { useId } from 'react'
import { VStack } from '../../styled-system/jsx'
import { UiLink } from '../components/ui/link/UiLink'
import { SignInForm } from '../features/auth/sign-in/SignInForm'
import { appConfig } from '../shared/appConfig'

const Route = createFileRoute('/_anonymous/sign-in')({
  component: SignInPage,
})

function SignInPage() {
  const formId = useId()

  const { login } = useKindeAuth()

  return (
    <VStack alignItems="center" justifyContent="center" rowGap="3">
      <Heading as="h2" size="4xl" fontWeight="normal">
        Sign in to <strong>ZENIF</strong> business portal
      </Heading>
      <SignInForm
        id={formId}
        onSubmit={(vars) => {
          login({
            authUrlParams: {
              connection_id: appConfig.kinde.connectionIds.passwordless,
              login_hint: vars.email,
            },
          })
        }}
      />
      <UiLink to="/sign-up">Don't have an account? Sign up.</UiLink>
    </VStack>
  )
}

export { Route }

import { useKindeAuth } from '@kinde-oss/kinde-auth-react'
import { createFileRoute } from '@tanstack/react-router'
import { Heading } from '@zenif/react-web-components-v2'
import { useId } from 'react'
import { VStack } from '../../styled-system/jsx'
import { UiLink } from '../components/ui/link/UiLink'
import { SignInForm } from '../features/auth/sign-in/SignInForm'
import { appConfig } from '../shared/appConfig'

const Route = createFileRoute('/_anonymous/sign-in')({
  component: SignInPage,
})

function SignInPage() {
  const formId = useId()

  const { login } = useKindeAuth()

  return (
    <VStack alignItems="center" justifyContent="center" rowGap="3">
      <Heading as="h2" size="4xl" fontWeight="normal">
        Sign in to <strong>ZENIF</strong> business portal
      </Heading>
      <SignInForm
        id={formId}
        onSubmit={(vars) => {
          login({
            authUrlParams: {
              connection_id: appConfig.kinde.connectionIds.passwordless,
              login_hint: vars.email,
            },
          })
        }}
      />
      <UiLink to="/sign-up">Don't have an account? Sign up.</UiLink>
    </VStack>
  )
}

export { Route }

F

Francisco "Klogan" BarrosOP•8/20/24, 8:16 PM

import { zodResolver } from '@hookform/resolvers/zod'
import { Button, Form } from '@zenif/react-web-components-v2'
import { passwordlessAuthSchema } from '@zenif/ts-zod'
import { useForm } from 'react-hook-form'
import { useTranslation } from 'react-i18next'

type SignInFormProps = {
  id: string
  onSubmit: (data: { email: string }) => void
}

export function SignInForm({ id, onSubmit }: SignInFormProps) {
  const { t } = useTranslation(['common', 'errors'])
  const emailLabel = 'Email' // t('email', { ns: 'common' })

  const methods = useForm({
    defaultValues: { email: '' },
    mode: 'onChange',
    resolver: zodResolver(passwordlessAuthSchema),
  })

  const handleSubmit = methods.handleSubmit((data) => {
    onSubmit(data)
  })

  return (
    <Form.Root methods={methods} id={id} onSubmit={handleSubmit}>
      <Form.FieldControl
        control={methods.control}
        name="email"
        render={({ field }) => (
          <Form.FieldRoot>
            <Form.FieldLabel>{emailLabel}</Form.FieldLabel>
            <Form.FieldInput placeholder={emailLabel} type="email" {...field} />
            <Form.FieldHelperText />
            <Form.FieldErrorText />
          </Form.FieldRoot>
        )}
      />
      <Form.RootErrorText />
      <Button type="submit">
        Sign in
      </Button>
    </Form.Root>
  )
}

import { zodResolver } from '@hookform/resolvers/zod'
import { Button, Form } from '@zenif/react-web-components-v2'
import { passwordlessAuthSchema } from '@zenif/ts-zod'
import { useForm } from 'react-hook-form'
import { useTranslation } from 'react-i18next'

type SignInFormProps = {
  id: string
  onSubmit: (data: { email: string }) => void
}

export function SignInForm({ id, onSubmit }: SignInFormProps) {
  const { t } = useTranslation(['common', 'errors'])
  const emailLabel = 'Email' // t('email', { ns: 'common' })

  const methods = useForm({
    defaultValues: { email: '' },
    mode: 'onChange',
    resolver: zodResolver(passwordlessAuthSchema),
  })

  const handleSubmit = methods.handleSubmit((data) => {
    onSubmit(data)
  })

  return (
    <Form.Root methods={methods} id={id} onSubmit={handleSubmit}>
      <Form.FieldControl
        control={methods.control}
        name="email"
        render={({ field }) => (
          <Form.FieldRoot>
            <Form.FieldLabel>{emailLabel}</Form.FieldLabel>
            <Form.FieldInput placeholder={emailLabel} type="email" {...field} />
            <Form.FieldHelperText />
            <Form.FieldErrorText />
          </Form.FieldRoot>
        )}
      />
      <Form.RootErrorText />
      <Button type="submit">
        Sign in
      </Button>
    </Form.Root>
  )
}

import { zodResolver } from '@hookform/resolvers/zod'
import { Button, Form } from '@zenif/react-web-components-v2'
import { passwordlessAuthSchema } from '@zenif/ts-zod'
import { useForm } from 'react-hook-form'
import { useTranslation } from 'react-i18next'

type SignInFormProps = {
  id: string
  onSubmit: (data: { email: string }) => void
}

export function SignInForm({ id, onSubmit }: SignInFormProps) {
  const { t } = useTranslation(['common', 'errors'])
  const emailLabel = 'Email' // t('email', { ns: 'common' })

  const methods = useForm({
    defaultValues: { email: '' },
    mode: 'onChange',
    resolver: zodResolver(passwordlessAuthSchema),
  })

  const handleSubmit = methods.handleSubmit((data) => {
    onSubmit(data)
  })

  return (
    <Form.Root methods={methods} id={id} onSubmit={handleSubmit}>
      <Form.FieldControl
        control={methods.control}
        name="email"
        render={({ field }) => (
          <Form.FieldRoot>
            <Form.FieldLabel>{emailLabel}</Form.FieldLabel>
            <Form.FieldInput placeholder={emailLabel} type="email" {...field} />
            <Form.FieldHelperText />
            <Form.FieldErrorText />
          </Form.FieldRoot>
        )}
      />
      <Form.RootErrorText />
      <Button type="submit">
        Sign in
      </Button>
    </Form.Root>
  )
}

import { zodResolver } from '@hookform/resolvers/zod'
import { Button, Form } from '@zenif/react-web-components-v2'
import { passwordlessAuthSchema } from '@zenif/ts-zod'
import { useForm } from 'react-hook-form'
import { useTranslation } from 'react-i18next'

type SignInFormProps = {
  id: string
  onSubmit: (data: { email: string }) => void
}

export function SignInForm({ id, onSubmit }: SignInFormProps) {
  const { t } = useTranslation(['common', 'errors'])
  const emailLabel = 'Email' // t('email', { ns: 'common' })

  const methods = useForm({
    defaultValues: { email: '' },
    mode: 'onChange',
    resolver: zodResolver(passwordlessAuthSchema),
  })

  const handleSubmit = methods.handleSubmit((data) => {
    onSubmit(data)
  })

  return (
    <Form.Root methods={methods} id={id} onSubmit={handleSubmit}>
      <Form.FieldControl
        control={methods.control}
        name="email"
        render={({ field }) => (
          <Form.FieldRoot>
            <Form.FieldLabel>{emailLabel}</Form.FieldLabel>
            <Form.FieldInput placeholder={emailLabel} type="email" {...field} />
            <Form.FieldHelperText />
            <Form.FieldErrorText />
          </Form.FieldRoot>
        )}
      />
      <Form.RootErrorText />
      <Button type="submit">
        Sign in
      </Button>
    </Form.Root>
  )
}

[help] custom sign-up and sign-in pages

Similar Threads

Similar Threads

Similar Threads