"use strict";(self.webpackChunknewoaks_help=self.webpackChunknewoaks_help||[]).push([[4428],{6006:(e,t,n)=>{n.d(t,{A:()=>i});const i=n.p+"assets/images/clerk-copy-script-71486c19543a209f6acd5fdb76b9bd22.png"},6449:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>o,contentTitle:()=>l,default:()=>h,frontMatter:()=>a,metadata:()=>i,toc:()=>c});const i=JSON.parse('{"id":"integration-clerk","title":"Clerk Integration","description":"What is Clerk?","source":"@site/Integration/013.integration-clerk.md","sourceDirName":".","slug":"/integration-clerk","permalink":"/guides/integration/integration-clerk","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":13,"frontMatter":{"sidebar_position":13},"sidebar":"sidebar","previous":{"title":"Facebook Login Integration","permalink":"/guides/integration/integration-facebooklogin"},"next":{"title":"Integrating with Backend APIs","permalink":"/guides/integration/integration-backend"}}');var r=n(4848),s=n(8453);n(8175);const a={sidebar_position:13},l="Clerk Integration",o={},c=[{value:"What is Clerk?",id:"what-is-clerk",level:2},{value:"How to Integrate Clerk?",id:"how-to-integrate-clerk",level:2},{value:"Configure Clerk",id:"configure-clerk",level:3},{value:"Implement Clerk Authentication",id:"implement-clerk-authentication",level:3},{value:"Final Result",id:"final-result",level:3},{value:"Additional Features",id:"additional-features",level:3},{value:"Enable Waitlist Feature",id:"enable-waitlist-feature",level:4},{value:"Implement Waitlist Functionality",id:"implement-waitlist-functionality",level:4}];function d(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"clerk-integration",children:"Clerk Integration"})}),"\n",(0,r.jsx)(t.h2,{id:"what-is-clerk",children:"What is Clerk?"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://clerk.com/",children:"Clerk"})," is a powerful authentication platform that allows you to implement user authentication, login, and registration without needing to manage your own backend database and API servers. It provides:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"User authentication and management"}),"\n",(0,r.jsx)(t.li,{children:"Login and registration functionality"}),"\n",(0,r.jsx)(t.li,{children:"Third-party authentication (Google, GitHub, etc.)"}),"\n",(0,r.jsx)(t.li,{children:"User data collection (name, email, phone, etc.)"}),"\n",(0,r.jsx)(t.li,{children:"Password strength configuration"}),"\n",(0,r.jsx)(t.li,{children:"Waitlist functionality"}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"how-to-integrate-clerk",children:"How to Integrate Clerk?"}),"\n",(0,r.jsx)(t.p,{children:"Let's create a project and task management website with Clerk authentication. Here's a step-by-step guide:"}),"\n",(0,r.jsx)(t.h3,{id:"configure-clerk",children:"Configure Clerk"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Log in to the ",(0,r.jsx)(t.a,{href:"https://dashboard.clerk.com/",children:"Clerk Dashboard"})]}),"\n",(0,r.jsxs)(t.li,{children:["Navigate to the ",(0,r.jsx)(t.a,{href:"https://dashboard.clerk.com/last-active?path=api-keys",children:"API keys"})," page"]}),"\n",(0,r.jsx)(t.li,{children:"In the Quick Copy section, select JavaScript from the dropdown menu"}),"\n",(0,r.jsxs)(t.li,{children:["Copy the ",(0,r.jsx)(t.code,{children:"<script>"})," tag\n",(0,r.jsx)(t.img,{alt:"copy clerk script",src:n(6006).A+"",width:"767",height:"801"})]}),"\n"]}),"\n",(0,r.jsx)(t.h3,{id:"implement-clerk-authentication",children:"Implement Clerk Authentication"}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsx)(t.li,{children:"Use the following prompt to create a website first:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Let\u2019s build a beautiful project and task management app in the style of Asana.Let\u2019s start by building a great looking homepage.\n"})}),"\n",(0,r.jsxs)(t.ol,{start:"2",children:["\n",(0,r.jsxs)(t.li,{children:["Add the following code to implement Clerk authentication, and ",(0,r.jsx)(t.strong,{children:"replace the placeholder with your own values"}),":"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:'Users should be able to login and signup using Clerk for authentication and user management.\nThis is Clerk JavaScript Script:\n<script\n  async\n  crossorigin="anonymous"\n  data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"\n  src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@5/dist/clerk.browser.js"\n  type="text/javascript"\n><\/script>\n'})}),"\n",(0,r.jsx)(t.h3,{id:"final-result",children:"Final Result"}),"\n",(0,r.jsx)(t.p,{children:"Once the website is created, users can:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Register and log in using Clerk's authentication system"}),"\n",(0,r.jsx)(t.li,{children:"Access the project management features with their authenticated accounts"}),"\n"]}),"\n",(0,r.jsx)(t.h3,{id:"additional-features",children:"Additional Features"}),"\n",(0,r.jsx)(t.h4,{id:"enable-waitlist-feature",children:"Enable Waitlist Feature"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Log in to the ",(0,r.jsx)(t.a,{href:"https://dashboard.clerk.com/",children:"Clerk Dashboard"})]}),"\n",(0,r.jsx)(t.li,{children:"Navigate to the Restrictions section"}),"\n",(0,r.jsxs)(t.li,{children:["Set the registration mode to waitlist\n",(0,r.jsx)(t.img,{alt:"set restrictions",src:n(8583).A+"",width:"1278",height:"428"})]}),"\n"]}),"\n",(0,r.jsx)(t.h4,{id:"implement-waitlist-functionality",children:"Implement Waitlist Functionality"}),"\n",(0,r.jsx)(t.p,{children:"Add the following code to implement waitlist functionality:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Use Clerk\u2019s waitlist component to let users join while we build the rest of the app.\n"})})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8175:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var i=n(4848);function r(){return(0,i.jsx)("code",{children:"EZsite"})}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>l});var i=n(6540);const r={},s=i.createContext(r);function a(e){const t=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(s.Provider,{value:t},e.children)}},8583:(e,t,n)=>{n.d(t,{A:()=>i});const i=n.p+"assets/images/clerk-set-restrictions-14b8afef6addd1f2a6c42a4a83479934.png"}}]);