Skip to content

feat(react-kit): email otp authentication flow #100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
OmarBasem merged 9 commits into from
Apr 24, 2026
Merged

feat(react-kit): email otp authentication flow #100

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5158bbc
feat: email verification
OmarBasem Apr 15, 2026
5582ca6
feat: email verification
OmarBasem Apr 15, 2026
f524a5b
lint
OmarBasem Apr 15, 2026
23951eb
lint
OmarBasem Apr 15, 2026
66e517e
lint
OmarBasem Apr 15, 2026
2a8d98d
lint
OmarBasem Apr 22, 2026
629f2fe
review
OmarBasem Apr 22, 2026
3f379df
review
OmarBasem Apr 23, 2026
426e4ee
review
OmarBasem Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 2 additions & 24 deletions packages/react-kit/src/auth/components/CodeInput/CodeInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,11 @@ const meta = {
},
tags: ['autodocs'],
argTypes: {
length: { control: { type: 'number', min: 4, max: 8 } },
disabled: { control: 'boolean' },
error: { control: 'boolean' },
autoFocus: { control: 'boolean' },
},
args: {
length: 6,
disabled: false,
error: false,
autoFocus: false,
},
} satisfies Meta<typeof CodeInput>
Expand All @@ -28,27 +24,17 @@ type Story = StoryObj<typeof meta>

export const Default: Story = {}

export const WithError: Story = {
args: {
error: true,
},
}

export const Disabled: Story = {
args: {
disabled: true,
},
}

export const FourDigits: Story = {
Copy link
Copy Markdown
Collaborator

@brtkx brtkx Apr 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we removing the length prop?

Copy link
Copy Markdown
Member Author

@OmarBasem OmarBasem Apr 22, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated!

(I was thinking devs would be using our ZD backend which is using 6 digit code, but yeah keeping it dynamic makes sense anyways 👍 )

args: {
length: 4,
},
}

export const WithOnComplete: Story = {
args: {
onComplete: (code) => {
// biome-ignore lint/suspicious/noConsole: This is a demo/story
console.log(`Code complete: ${code}`)
alert(`Code complete: ${code}`)
},
},
Expand All @@ -61,18 +47,10 @@ export const AllStates: Story = {
<span className="text-sm text-gray-500 font-medium">Default</span>
<CodeInput />
</div>
<div className="flex flex-col gap-2 items-center">
<span className="text-sm text-red-500 font-medium">Error</span>
<CodeInput error />
</div>
<div className="flex flex-col gap-2 items-center">
<span className="text-sm text-gray-400 font-medium">Disabled</span>
<CodeInput disabled />
</div>
<div className="flex flex-col gap-2 items-center">
<span className="text-sm text-gray-500 font-medium">4-digit</span>
<CodeInput length={4} />
</div>
</div>
),
}
Loading
Loading