feat(elements): Initial implementation of First Factor (#2496)

* feat(elements): First Factor interim commit * chore(elements): Updates for rebased changes * chore(elements): Add changeset
clerk · Jan 5, 2024 · 5edd2df · 5edd2df
1 parent d0fbb6f
commit 5edd2df
Show file tree

Hide file tree

Showing 14 changed files with 634 additions and 326 deletions.
diff --git a/.changeset/tender-peaches-yell.md b/.changeset/tender-peaches-yell.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/elements/examples/nextjs/app/page.tsx b/packages/elements/examples/nextjs/app/page.tsx
@@ -1,14 +1,22 @@
+import { SignedIn, SignOutButton } from '@clerk/nextjs';
 import Image from 'next/image';
 import Link from 'next/link';
 
 export default function Home() {
   return (
     <main className='flex min-h-screen flex-col items-center justify-between p-24'>
-      <div className='z-10 max-w-5xl w-full items-center justify-center font-mono text-sm lg:flex'>
-        <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'>
+      <div className='z-10 max-w-5xl w-full items-center font-mono text-sm lg:flex justify-between'>
+        <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'>
           Get started by editing&nbsp;
           <code className='font-mono font-bold'>app/sign-in/[[...sign-in]]/page.tsx</code>
         </p>
+        <SignedIn>
+          <SignOutButton redirectUrl='/sign-in'>
+            <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'>
+              Sign Out
+            </p>
+          </SignOutButton>
+        </SignedIn>
       </div>
 
       <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]">

diff --git a/packages/elements/examples/nextjs/app/sign-in/[[...sign-in]]/page.tsx b/packages/elements/examples/nextjs/app/sign-in/[[...sign-in]]/page.tsx
@@ -15,7 +15,8 @@ import {
 } from '@clerk/elements';
 import clsx from 'clsx';
 import Image from 'next/image';
-import { type CSSProperties, forwardRef } from 'react';
+import type { CSSProperties } from 'react';
+import { forwardRef } from 'react';
 
 import { Debug } from '@/components/debug';
 
@@ -106,37 +107,43 @@ export default function SignInPage() {
                 />
               </Field>
 
-              <Field
-                name='password'
-                className='flex flex-col gap-4'
-              >
-                <div className='flex gap-4 justify-between items-center'>
-                  <Label>Password</Label>
-                  <Input
-                    type='password'
-                    className='bg-tertiary rounded-sm px-2 py-1 border border-foreground  data-[invalid]:border-red-500'
-                  />
-                </div>
+              <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'>
+                Sign In
+              </Submit>
+            </div>
+          </div>
+        </SignInStart>
 
-                <Errors
-                  render={({ code, message }) => (
-                    <CustomError
-                      code={code}
-                      message={message}
-                    />
-                  )}
+        <SignInFactorOne>
+          <div className='flex flex-col items-center justify-center gap-12'>
+            <h1 className='text-xl mb-6 font-mono'>FIRST FACTOR</h1>
+
+            <Field
+              name='password'
+              className='flex flex-col gap-4'
+            >
+              <div className='flex gap-4 justify-between items-center'>
+                <Label>Password</Label>
+                <Input
+                  type='password'
+                  className='bg-tertiary rounded-sm px-2 py-1 border border-foreground  data-[invalid]:border-red-500'
                 />
-              </Field>
-            </div>
+              </div>
+
+              <Errors
+                render={({ code, message }) => (
+                  <CustomError
+                    code={code}
+                    message={message}
+                  />
+                )}
+              />
+            </Field>
 
             <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'>
               Sign In
             </Submit>
           </div>
-        </SignInStart>
-
-        <SignInFactorOne>
-          <p>Factor one child</p>
         </SignInFactorOne>
 
         <SignInFactorTwo>

diff --git a/packages/elements/examples/nextjs/package.json b/packages/elements/examples/nextjs/package.json
@@ -2,9 +2,6 @@
   "name": "elements-nextjs",
   "version": "0.1.0",
   "private": true,
-  "workspaces": [
-    "../.."
-  ],
   "scripts": {
     "build": "next build",
     "dev": "next dev",
@@ -13,7 +10,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@clerk/elements": "*",
+    "@clerk/elements": "file:../../elements",
     "@clerk/nextjs": "file:../../nextjs",
     "@radix-ui/react-form": "^0.0.3",
     "clsx": "^2.0.0",

diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -63,6 +63,7 @@
     "@clerk/shared": "2.0.0-alpha-v5.8",
     "@radix-ui/react-form": "^0.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@statelyai/inspect": "^0.1.0",
     "@xstate/react": "^4.0.1",
     "clsx": "^2.0.0",
     "react-children-utilities": "^2.9.0",