Skip to content

Commit 5edd2df

Browse files
tmilewskitmilewski
authored
feat(elements): Initial implementation of First Factor (clerk#2496)
* feat(elements): First Factor interim commit * chore(elements): Updates for rebased changes * chore(elements): Add changeset
1 parent d0fbb6f commit 5edd2df

14 files changed

Lines changed: 634 additions & 326 deletions

File tree

‎.changeset/tender-peaches-yell.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎package-lock.json‎

Lines changed: 67 additions & 41 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/elements/examples/nextjs/app/page.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
1+
import { SignedIn, SignOutButton } from '@clerk/nextjs';
12
import Image from 'next/image';
23
import Link from 'next/link';
34

45
export default function Home() {
56
return (
67
<main className='flex min-h-screen flex-col items-center justify-between p-24'>
7-
<div className='z-10 max-w-5xl w-full items-center justify-center font-mono text-sm lg:flex'>
8-
<p className='font-mono text-sm fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30'>
8+
<div className='z-10 max-w-5xl w-full items-center font-mono text-sm lg:flex justify-between'>
9+
<p className='font-mono text-sm fixed left-0 top-0 hidden lg:flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30'>
910
Get started by editing&nbsp;
1011
<code className='font-mono font-bold'>app/sign-in/[[...sign-in]]/page.tsx</code>
1112
</p>
13+
<SignedIn>
14+
<SignOutButton redirectUrl='/sign-in'>
15+
<p className='font-mono text-sm fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 py-4 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30 hover:border-red-500/60 hover:text-red-300 transition-colors duration-500 cursor-pointer'>
16+
Sign Out
17+
</p>
18+
</SignOutButton>
19+
</SignedIn>
1220
</div>
1321

1422
<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">

‎packages/elements/examples/nextjs/app/sign-in/[[...sign-in]]/page.tsx‎

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ import {
1515
} from '@clerk/elements';
1616
import clsx from 'clsx';
1717
import Image from 'next/image';
18-
import { type CSSProperties, forwardRef } from 'react';
18+
import type { CSSProperties } from 'react';
19+
import { forwardRef } from 'react';
1920

2021
import { Debug } from '@/components/debug';
2122

@@ -106,37 +107,43 @@ export default function SignInPage() {
106107
/>
107108
</Field>
108109

109-
<Field
110-
name='password'
111-
className='flex flex-col gap-4'
112-
>
113-
<div className='flex gap-4 justify-between items-center'>
114-
<Label>Password</Label>
115-
<Input
116-
type='password'
117-
className='bg-tertiary rounded-sm px-2 py-1 border border-foreground data-[invalid]:border-red-500'
118-
/>
119-
</div>
110+
<Submit className='px-4 py-2 b-1 bg-blue-950 bg-opacity-20 hover:bg-opacity-10 active:bg-opacity-5 rounded-md dark:bg-opacity-100 dark:hover:bg-opacity-80 dark:active:bg-opacity-50 transition'>
111+
Sign In
112+
</Submit>
113+
</div>
114+
</div>
115+
</SignInStart>
120116

121-
<Errors
122-
render={({ code, message }) => (
123-
<CustomError
124-
code={code}
125-
message={message}
126-
/>
127-
)}
117+
<SignInFactorOne>
118+
<div className='flex flex-col items-center justify-center gap-12'>
119+
<h1 className='text-xl mb-6 font-mono'>FIRST FACTOR</h1>
120+
121+
<Field
122+
name='password'
123+
className='flex flex-col gap-4'
124+
>
125+
<div className='flex gap-4 justify-between items-center'>
126+
<Label>Password</Label>
127+
<Input
128+
type='password'
129+
className='bg-tertiary rounded-sm px-2 py-1 border border-foreground data-[invalid]:border-red-500'
128130
/>
129-
</Field>
130-
</div>
131+
</div>
132+
133+
<Errors
134+
render={({ code, message }) => (
135+
<CustomError
136+
code={code}
137+
message={message}
138+
/>
139+
)}
140+
/>
141+
</Field>
131142

132143
<Submit className='px-4 py-2 b-1 bg-blue-950 bg-opacity-20 hover:bg-opacity-10 active:bg-opacity-5 rounded-md dark:bg-opacity-100 dark:hover:bg-opacity-80 dark:active:bg-opacity-50 transition'>
133144
Sign In
134145
</Submit>
135146
</div>
136-
</SignInStart>
137-
138-
<SignInFactorOne>
139-
<p>Factor one child</p>
140147
</SignInFactorOne>
141148

142149
<SignInFactorTwo>

‎packages/elements/examples/nextjs/package.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22
"name": "elements-nextjs",
33
"version": "0.1.0",
44
"private": true,
5-
"workspaces": [
6-
"../.."
7-
],
85
"scripts": {
96
"build": "next build",
107
"dev": "next dev",
@@ -13,7 +10,7 @@
1310
"start": "next start"
1411
},
1512
"dependencies": {
16-
"@clerk/elements": "*",
13+
"@clerk/elements": "file:../../elements",
1714
"@clerk/nextjs": "file:../../nextjs",
1815
"@radix-ui/react-form": "^0.0.3",
1916
"clsx": "^2.0.0",

‎packages/elements/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
"@clerk/shared": "2.0.0-alpha-v5.8",
6464
"@radix-ui/react-form": "^0.0.3",
6565
"@radix-ui/react-slot": "^1.0.2",
66+
"@statelyai/inspect": "^0.1.0",
6667
"@xstate/react": "^4.0.1",
6768
"clsx": "^2.0.0",
6869
"react-children-utilities": "^2.9.0",

0 commit comments

Comments
 (0)