02:21 welcome back to another episode of
02:24 stripe Dev chats I'm CJ and I'm joined
02:26 by my colleague Mike and Colin from
02:29 clerk.dev and we're really excited to
02:31 see today because we're going to talk
02:31 about authentication and Colin has some
02:34 really cool demos for us that we're
02:36 going to go through all about
02:37 authenticating your stripe customers and
02:39 there's some really solid use cases in
02:41 both the B to B and B to C uh spaces
02:45 especially if you have a react
02:47 application if you're writing uh next JS
02:49 there's tons of great walkthroughs too
02:51 in the clark.dev documentation so if you
02:54 head over there you'll see options for
02:56 Redwood JS which you know we're we've
02:58 got our friends over there at Redwood I
03:00 think we're super super excited to uh to
03:02 pair with but before we jump into that
03:04 we've got to go through some stripe
03:06 updates so I'm gonna let Mike jump in
03:09 and go and talk about some of his tabs
03:11 here that he's got ready to go about
03:13 some some upcoming stripe things that
03:15 are that were actually just launched and
03:17 uh yeah I'll let you I'll let you take
03:19 it away Mike right on thanks CJ I'm
03:21 gonna make this just a little bigger
03:23 take up a little more of the space here
03:24 and maybe zoom in a little bit so a
03:26 couple of updates to go through
03:28 um first of all there's an updated uh
03:30 API on payment requests called
03:32 paymentrequest dot can make payment uh
03:34 what this does is it returns a promise
03:36 and async uh response that lets you know
03:39 if a wallet is ready to make a payment
03:40 so this is helpful in cases where you
03:42 need to check to see if someone has
03:44 connected uh Apple pay
03:46 um link or Google pay and as you can see
03:49 here the syntax is pretty simple I'm
03:51 showing JavaScript right now but what it
03:53 gives you back is a dictionary
03:54 essentially a Json object that shows
03:56 Apple pay Google pay and link whether or
03:58 not they're available to be used
04:02 redirect to checkout uh and on the
04:05 stripe API has been deprecated so uh
04:08 this was a method that you could use on
04:10 the front end to redirect your users to
04:12 checkout it has since been deprecated
04:15 because of our sort of preference for
04:18 um using server-side uh redirects for
04:22 um let's see anything I missed there CJ
04:24 oh yeah this was um this was early early
04:27 in the early stripe checkout days of the
04:29 the new stripe checkout this was the way
04:31 that we recommended most users redirect
04:32 the checkout so you might either create
04:35 a checkout session on the server and
04:37 then pass its ID to the client and then
04:40 redirect to checkout or you could pass
04:41 in this object that had line items and
04:44 you would redirect to try to check out
04:46 client side but we found that it just
04:48 wasn't flexible enough to meet the
04:49 user's needs and so we stopped adding
04:52 features to it a while ago and now it's
04:54 officially deprecated so yeah you
04:56 definitely don't want to use the
04:57 client-side version because instead you
05:00 can use the server side version where
05:02 you can just fire up a checkout session
05:03 and redirect to its URL on the on the
05:07 Bingo exactly so let me run through some
05:10 of our other updates here uh we have a
05:13 new um actually I'm going to zoom out on
05:14 this to show it a little more in context
05:16 we have a new docs section on no code on
05:18 stripe.com docs uh you'll see there's a
05:20 new tab added to the top here that shows
05:22 you all of Stripes no code documentation
05:24 uh in one place so this is a new hub for
05:26 no code documentation it walks through
05:28 all of the options for doing things with
05:30 stripe without writing code so sort of
05:31 configuration first meant for people uh
05:34 to get up and running quickly uh and to
05:36 get things done without having to go and
05:38 spend a bunch of time writing code for
05:41 um I have taken a really strong stance
05:42 on this that I think this is really
05:43 important for developers to adopt as
05:45 early as possible and when you outgrow
05:46 no code things you can start thinking
05:48 about updating your integration with
05:50 something that's a little more code
05:51 heavy if you haven't tried it before
05:53 this stuff is really tremendous the
05:55 pricing table is really cool this is
05:57 marked as some code here because it
05:59 essentially generates a script tag that
06:00 you need to embed on a page somewhere so
06:02 you need to be at least dangerous enough
06:03 to do that payment links are really cool
06:05 you can create a URL that anyone can go
06:08 to to complete a purchase for any one of
06:09 your products yeah so check this out let
06:11 us know what you think no code scenarios
06:13 are growing with stripe we see it as an
06:15 important thing and something that's
06:16 gaining a lot of traction in the
06:18 developer ecosystem as well
06:20 uh up next on stripe checkout we have
06:23 the opportunity the ability to present
06:25 local currencies so what this means is
06:28 that you can set up prices price objects
06:30 on your products that have multiple
06:32 in other words you can set up what a
06:35 single product that say costs a hundred
06:37 dollars U.S and you can set specific
06:39 prices for other currencies that will
06:41 show their currencies in their sort of
06:43 local conversion here so uh if a user
06:46 from the UK or the EU shows up and wants
06:49 to make a purchase on my site they'll
06:50 see it in their local currency I believe
06:53 in the local currency as well there is
06:55 an opportunity here to um
06:58 uh set a a automatic flag to enable the
07:03 payment methods that are available in
07:04 those Lookouts too so lots of
07:06 flexibility here for uh working with uh
07:08 currencies in different
07:10 um geographies and countries
07:13 a couple events coming up uh this is
07:15 going to feel like I'm just plugging my
07:16 own stuff for a minute here but I
07:18 promise you this is all about Stripes so
07:20 uh in November I'm headed to the
07:22 Caribbean developers conference in Punta
07:24 Cana with Cecil who's normally host of
07:26 our Dev chats here we're going to be
07:28 giving a session on going from zero to
07:30 revenue with stripe uh with a friend of
07:32 ours from the Dominican Republic who's
07:34 growing a company there his story is
07:36 really cool very interesting super cool
07:38 to hear about how he's grown his company
07:40 using Stripes products as well as stripe
07:43 Atlas which is one of our sort of
07:44 product Suites that you can use to
07:46 incorporate a us-based company and so
07:49 that's how he's formed his business in
07:51 the Dominican Republic super cool story
07:53 looking forward to that event and I hope
07:57 uh also in November that same week uh
07:59 October 30th to November 2nd is all
08:01 things open the open source conference
08:03 in Raleigh North Carolina in the U.S uh
08:05 I'm giving a talk at all things open on
08:07 markdock which is our um superset of
08:11 markdown it is a open source system for
08:14 adding functionality to markdoc uh to
08:16 make scalable Dynamic pages so actually
08:19 everything that I showed you before for
08:21 stripe documentation is all markduck
08:23 powered so all this um is created by our
08:27 docs teams using markduck and we created
08:28 markduck to sort of solve this problem
08:30 where documentation might need multiple
08:32 languages it might need reuse of content
08:35 within it there's functional
08:37 Dynamic content on the page where you
08:40 can add things and whatnot and so my
08:42 talk here will be about the history of
08:43 markduck and how you can use it on your
08:45 sites and I'm actually working to
08:48 convert my own site to using markdoc
08:50 right now so we'll have some use cases
08:53 so with that being said I think that's
08:55 the news updates for today that brings
08:57 us to my last tab going across the top
08:59 here uh which is Clerk and that's why
09:01 we've got our friend Colin here with us
09:02 today to talk about clerk.dev uh Colin
09:05 how you doing pretty good how are you
09:07 thanks for having me yeah of course I'm
09:08 doing great um why don't you start a
09:10 little bit tell us about clerk tell us
09:12 about yourself and then we can kind of
09:14 get into the uh the story here
09:18 um you know me personally I've just kind
09:21 of always been a software developer I
09:22 always had a side project going and
09:24 always kind of hated the alt step I
09:26 built this great product and then I'd
09:28 get to the odd step
09:30 um and you know I always
09:32 I always hated it for two reasons either
09:34 like it was too hard to do or whatever I
09:37 did just didn't feel good enough and I
09:39 didn't want to spend more time on it and
09:40 yeah I think really the inspiration for
09:42 clerk was like looking at tools like
09:44 stripe checkout where like hey I get
09:47 this whole UI and it's beautiful and
09:49 really easy to use and great ux for my
09:53 um but on the off side like that wasn't
09:55 really there like I was never as happy
09:57 with something and so really with clerk
10:00 um we've deployed these react components
10:02 uh that make it really easy to drop a
10:05 beautiful UI into your application
10:09 gotta say that part
10:13 so yeah I was looking at some of the
10:17 um I was saying that like one of them is
10:19 the user button or something that gives
10:20 you like your avatar out of the box with
10:23 some you know ways that you can sort of
10:25 uh you know log in log out Etc
10:28 um that seems really handy and one of
10:29 the one of the things too that I found
10:31 with clerk was that a lot of it was very
10:35 um so I'm curious like when you're
10:36 thinking about uh you know as you're
10:38 adding functionality to clerk are you
10:41 focused primarily on react and and just
10:44 react or is there like support for you
10:47 know View and svelte and other you know
10:49 a bunch of other Frameworks and yeah
10:50 what can we expect uh in terms of uh
10:53 front end front-end support yeah so I
10:56 guess where we stand right now is we
11:00 um but the react SDK is a shim over just
11:03 vanilla JavaScript and so everything you
11:06 do in the react SDK you could do through
11:11 um and ultimately make a you know a view
11:13 a spell whatever uh SDK as well
11:17 um that is on our roadmap to get to as
11:21 um we do have some some brave souls that
11:23 have built their own off of window.clark
11:25 and you can get it going very cool and
11:28 the clerk react SDK is all open source
11:31 tune so that that's a good Guiding Light
11:33 if someone's trying to do that
11:38 awesome should we jump into jump into a
11:43 absolutely yeah happy to all right um
11:48 great so this is this is our homepage I
11:51 think Mike just had it up um the user
11:53 button that CJ was referring to is this
11:56 and this is kind of just another kind of
11:59 component of sign up sign in uis that we
12:01 really wanted to bring to people and
12:03 make it really easy you've seen things
12:06 um probably and and so since it's a UI
12:09 associated with auth uh we ship it but
12:13 we'll do a demo of that as well
12:16 um in terms of what we're going to do
12:18 from a foundation perspective what I've
12:21 done so far uh I've created a new
12:25 next.js app I have Tech script turned on
12:27 uh really just for autocomplete makes my
12:31 life a little easier and then I've also
12:33 installed the clerk nexjs package
12:37 and I should be able to start this up
12:44 um one other thing I guess I prepared
12:49 environment variables so these are the
12:51 keys from Stripes dashboard and then on
12:54 this other tab I'm actually signed in on
12:57 the click dashboard and so we've set up
12:59 this stripe Dev chats application
13:01 uh within Clerk and now we're going to
13:05 install it on our localhost
13:08 so assuming this is running now nice
13:12 this is the next JS hello world and I
13:15 guess as the first step here we will
13:20 just put it behind a sign-in screen I
13:24 um the API Keys they're just in the
13:27 dashboard under API Keys that's where we
13:30 copy pasted these from I noticed that
13:32 nice little uh prefix of test
13:36 I don't know where we stole that from
13:41 a little yeah the stripe inspiration
13:44 throughout totally incidentally our
13:47 teammate uh Paul just published a blog
13:49 post on dev.2 so if you're interested in
13:51 learning more about object IDs generally
13:54 like how they work at stripe and like
13:56 why we have those prefixes if you head
13:58 over to dev.2 stripe there's yeah
14:01 excellent blog post about how we design
14:03 those and why why we start with those
14:05 prefixes and uh yeah I love seeing it in
14:08 the wild too because it's like okay yeah
14:09 like that's actually really really
14:11 helpful because when you see that that
14:13 prefix you know for sure that is my test
14:16 um yeah so this is uh oh nice you have a
14:21 similar okay we also wrote about how we
14:24 did it nice okay we uh we predated you a
14:27 little bit but you did that's writing
14:29 about it you're gonna steal my uh my SEO
14:34 uh but no absolutely I actually have
14:38 um and the benefits are real uh so if
14:41 you recommend if you're building an API
14:43 tip to implement those prefixes
14:48 should I jump in let's keep going let's
14:54 all right so if you've used next.js
14:58 um underscore app.tsx that's the like
15:01 entry point for the react application
15:03 and since we want to authenticate the
15:05 whole application that's where we're
15:07 gonna do a lot of our work and so first
15:10 thing we need to do is just pull in with
15:13 the provider mm-hmm
15:16 and this basically tells uh the
15:20 component which in this case is the page
15:21 about the user's auth State
15:24 um if I just flip back here nothing's
15:27 actually changed yet this isn't
15:28 impacting the page at all
15:31 um but now the Allstate is available to
15:33 the rest of the application
15:36 um next thing I'll pull in is the signed
15:42 now what this is saying is okay now
15:45 let's only render this component if
15:47 there's a user signed in and so if I
15:49 flip back now our screen is blank
15:53 um other side of the coin we need signed
15:59 and I'll start just by putting
16:02 photo signed out here
16:09 really made uh this demo fantastic yeah
16:17 uh and now we've got our our sign in so
16:21 I dropped sign in component that's put
16:24 um out of the box I guess I just had the
16:26 default settings on so there's sign in
16:28 with Google here people want they can
16:30 come in and and set up you know any
16:37 social auth options in Dev we can just
16:43 but then in production you'll need to
16:46 actually go through and uh set up your
16:49 own kind of oauth client Keys got it um
16:53 we can sign in here so is that is that
16:57 view to the sign in so that sign-in
16:59 component like how customizable is that
17:02 in terms of the look and feel and colors
17:04 and branding and do you do that from
17:07 your react code or from the dashboard or
17:09 where does that happen yeah so let's
17:12 give it a try uh so we got an appearance
17:20 is it command space that's not it
17:26 so yeah there's a whole bunch of options
17:30 for customization and I guess the it
17:32 works slightly similar to
17:38 appearance API uh so if you're familiar
17:41 with that this will feel a little
17:47 hit some variables first so
17:52 I always forget the intellisense thing
17:55 so if I wanted to just set like
17:58 color primary I think is something
18:10 oh my gosh so cassidue has like a really
18:13 funny page that's like all of the
18:16 hex codes that are words and they're all
18:21 I've ended up with a yellow that killed
18:23 my contrast but that's okay so yeah so
18:26 variables is just like they're the
18:34 variables I can think of another word uh
18:37 and so they impact the color of more
18:39 than one thing I'm actually just gonna
18:40 switch it to Red for
18:43 my own contrast concerns but then what
18:46 we also do that's I suppose slightly
18:48 different than uh stripe
18:52 um or not anyway I'll let you decide if
18:55 it's different after
18:56 um but you can come here oh wait I went
19:00 to a screen the other can't see uh so
19:03 every element here is addressable and so
19:08 uh if I want to take
19:11 why don't we take the uh form field
19:15 and if I go back here so not under
19:18 variables but elements
19:27 I can view I can like kill the Border
19:30 radius on this so do border radius zero
19:34 now we're getting square footage here
19:38 um it actually works with
19:41 anything uh so if I were to go into like
19:48 make a new class here that's just Foo
19:51 and you back on color red
19:55 uh except that's not that's CSS
20:00 then I can say hey instead of just like
20:02 targeting this one attribute here
20:05 let's append a class to our form field
20:09 inputs and we'll just append to
20:12 and now if you look here
20:17 sorry well first of all I got the
20:19 background color but then you can also
20:21 see that the foo ended up in the top
20:25 um and so I guess what's what's
20:26 different from stripe if you're really
20:28 familiar with the internals which uh I
20:31 don't know how many will be uh is that
20:33 this is actually mounted directly into
20:35 the Dom instead of an eye frame and so
20:37 you can actually uh
20:40 it's kind of a debate I think no one
20:42 knows the best way to build these
20:45 um and so I think the the mindset of
20:48 like a stripe approach where you have an
20:49 iframe is like the component is entirely
20:51 sandboxed and so external Styles can't
20:56 um the component but with clerk uh we
20:59 were thinking about them we're like well
21:00 that's not really pollution like maybe
21:02 they actually want their styles on
21:05 um so this strategy it's a it's a little
21:09 um because of that like there's this
21:10 intentional pollution going on
21:13 um one example of that is like if I go
21:17 we're totally going to have plenty of
21:19 time to talk about uh like I I was
21:22 originally concerned this was going to
21:23 go long but we're really going in deep
21:26 here so if I set the the font size on
21:29 that changes the REM and so everything
21:32 here is scaled off of Rems
21:34 uh and so that's that's kind of the best
21:37 example of like okay we're intentionally
21:40 get included that'll work with like the
21:42 font family as well
21:45 the whole thing is themeable right so
21:47 you can make this feel like your brand
21:49 you could uh you know have it blend in
21:51 with everything else and not feel like a
21:52 I don't know like a wart that you put on
21:54 top of your app that's from something
21:55 else that's really cool exactly yeah and
21:58 I think with with sign up and sign in in
22:00 particular like our customers were
22:03 really adamant like it needs to be
22:06 um like like just the variables didn't
22:08 get us through because that's what we
22:09 launched with and so we needed to come
22:11 up with this I know you can actually
22:13 edit the CSS of everything
22:17 cool so that's customization
22:20 um I'll sign in now oh I don't know if
22:24 you caught that it went through
22:26 clerk.share.lcl.gov those are the shared
22:27 keys that we set up for people in
22:29 development but now that we're signed in
22:33 we're back to this hello world
22:39 I can let's show off that user button
22:47 I'll just drop it right
22:49 above the component
22:54 I don't know how that got in there
22:58 so in one of the demos too I saw that
23:01 page props was being passed down into
23:03 the clerk provider is that what is like
23:05 the usefulness of that or
23:09 uh yeah so I'm not doing it here you are
23:12 right if you go to our docs
23:19 really streamline the next JS stuff so
23:23 uh you get too quickly but basically in
23:26 next.js because there's SSR
23:31 for page props and so by default what
23:34 I'm doing right now like there's no SSR
23:36 turned on so it doesn't matter and
23:37 that's why I didn't bother with it but
23:41 um if you are using SSR this basically
23:44 ensures that like the during the SSR run
23:48 that the user is actually signed in and
23:52 practically what it means that during
23:56 um if you pass page props then anything
23:59 inside signed in will get rendered as
24:02 expected if these are signed in if you
24:05 don't pass page props this will actually
24:08 rendering because it needs the front end
24:10 to decide if the user is signed in got
24:13 it yes so let me let me dumb that down
24:15 to next.js101 uh oh and and you can tell
24:19 me if I'm misunderstanding but the the
24:21 alternative is that means that if
24:23 um if you didn't add the page props
24:25 there what could potentially happen when
24:27 the page renders is it might uh not
24:29 render part of the page briefly or it
24:31 might flash be signed out thing and then
24:33 show you the signed in thing which I've
24:35 certainly experienced on on Plenty of
24:37 sites and it's definitely one of those
24:38 things that feels like maybe of an era
24:40 of a certain sort of uh single page web
24:42 app um thing we went through and when
24:44 react was young uh is that more or less
24:47 what would happen without that
24:51 um and and I think there's
24:54 there's still some benefit like we
24:56 actually have that flicker on our on our
24:58 homepage right now like wait an extra
25:01 second for the sign-in to run and uh or
25:05 for the sign in button to display and I
25:07 guess like the trade-off is
25:10 there's some speed things right so if
25:13 you if you don't if you don't need the
25:18 uh you can potentially get a page down
25:21 to the user faster and
25:24 um then just kind of resolve the signed
25:26 in state from the client side
25:28 um right as I'm saying that I'm
25:29 convincing myself that that's not
25:31 actually the case anymore though
25:34 yes either way either way works sure
25:39 yeah I guess that's getting into the
25:41 nerdy details a little bit but the
25:42 reason that that's important is because
25:43 like Google ranks your page based on how
25:45 quickly it renders to the user and
25:47 whether it shifts whether things on the
25:49 page Flash and come into existence as
25:51 the page loads too yeah
25:53 um we found in practice granted don't
25:56 look at our Lighthouse squares right now
25:59 uh we've found in practice that if it's
26:01 if it's just the sign up button in the
26:05 um and it's not triggering any layout
26:07 shift then it doesn't really impact
26:11 um but yeah certainly you need to kill
26:13 the layout shift no matter what you're
26:15 doing make sure that there's space for
26:16 that element to come in
26:21 I have I have a more fundamental
26:23 question here I guess it looks like your
26:24 your next Jazz demo is using typescript
26:26 uh will this all work for next projects
26:29 that are just JavaScript
26:33 um it all just still goes uh yeah it's
26:36 just uh I like it for the intellisense
26:38 but yeah sure sure right uh yeah like it
26:41 was really helpful I haven't memorized
26:44 all of the elements and variables
26:45 believe it or not yeah so it's great to
26:48 just be able to pop it up and uh click
26:51 it but everything does work with
26:51 JavaScript as well very cool
26:55 yeah so at this point you've added login
26:57 to your page you have uh I mean you've
26:59 added maybe 10 lines of code right and
27:01 suddenly we have logged in logged out
27:04 um experience you have some some
27:06 um page content there that looks like
27:08 it's loading directly from clerk2
27:10 um this user button now
27:15 we've got the whole user profile here
27:19 uh we know what device we're signed in
27:23 um I can actually go into the dashboard
27:31 let me turn on phone
27:43 and then if I refresh this
27:46 let's see if I I think I need to refresh
27:49 some things you still need to refresh
27:51 for but now users can come in they can
27:59 yeah cool very cool so yeah so it just
28:03 kind of comes out of the box
28:06 go ahead yeah I wanna I wanna sort of
28:10 like emphasize what just happened there
28:12 from the perspective of in a past life I
28:13 I built a SAS company right uh and like
28:16 the things that you've just set up and
28:18 added in 12 lines of code or whatever it
28:20 is it used to be like extremely arduous
28:22 to do in trying and required server-side
28:25 code and and you know middleware and
28:26 apis and all these things uh and even
28:29 then like I'm the first one to tell you
28:30 that I'm not a security expert uh so
28:33 there was always some element of being
28:34 uncertain as to whether or not it was
28:36 done correctly because there are a lot
28:37 of things that can go wrong in the
28:39 middle of these these processes too and
28:41 so like thinking about one of these
28:42 specific problems like
28:44 um uh resetting your password if you
28:46 forgot it uh I I can tell you I spent
28:48 days making sure that I got that right
28:50 building apps in the past using pretty
28:52 like well-known authentication providers
28:54 it was a whole whole ordeal to do for
28:56 sure and so like I don't know you're
28:58 it's it's a blazing demo to kind of run
29:00 through pretty quickly and I just want
29:01 to kind of pause and say like this is a
29:03 really really interesting application
29:05 and one of those things that is just
29:06 like the world in 2022 feels really
29:09 awesome but this used to be I don't know
29:11 full-time work for a small team of
29:13 Engineers for quite a few weeks to get
29:15 this kind of thing done yeah yeah no
29:17 thanks thanks so much for calling it out
29:20 it's it's really been a ton of fun
29:24 seeing how much we can build into
29:27 components versus kind of the old school
29:32 API approach to developer Tools in it
29:34 like in your intro you're showing all
29:36 the new no code stuff that Stripes doing
29:38 and I think it's really all that same
29:41 hey like once we actually
29:44 get permission from the developer to
29:49 entire features instead of just
29:52 like instead of just drive.charge
29:55 show the checkout uh it's such a
29:58 powerful concept to just keep building
30:00 on and and we're really we're having a
30:03 ton of fun yeah doing it doing it with
30:06 auth um and it's surprising how much
30:09 there is I think a lot of people are
30:11 kind of deceived originally by like oh
30:13 yeah I pulled in this library and
30:16 um I got emails and passwords going
30:19 pretty quickly yeah yeah can you ask
30:22 some silly future questions but sorry
30:24 can I ask you some silly future
30:26 questions based on being the guy who
30:28 used to have to run these things so
30:29 let's say I came to you and uh explained
30:32 to you that I like I don't know I threw
30:33 my laptop in a lake and I can no longer
30:35 get to my account to reset my password
30:37 uh is there a way for you to go and send
30:39 me a password reset email or something
30:42 there is a way for our
30:48 for like our developer customers yeah
30:51 that's what I mean yeah so so the person
30:53 who owns the application can they go and
30:55 like manage users from within the clerk
30:56 Dev dashboard there I will say
30:59 I've seen it I am not sure if it's
31:02 landed on prod yet but sure sure
31:05 yeah that's yeah that's um
31:08 uh yeah it's coming if it's not out yeah
31:12 and you had a pretty staggering amount
31:14 of off providers there too which you
31:16 kind of Blaze through like ticking a
31:17 check box and suddenly Twitter appeared
31:19 but there's what half a dozen different
31:21 authenticators in there yeah and it it
31:24 just it's more there's yeah that's
31:27 amazing yeah wow there's a lot what's
31:29 going on and it just keeps it keeps
31:32 going too this one we've gotten our
31:34 cycle time on this down to like two
31:36 hours but now the longest part is
31:39 waiting for the vendor to approve the
31:45 um we yeah we've got some web3 here uh
31:48 if you want if you have like a new
31:50 application and you have like a
31:52 uh like an allow us you don't want
31:54 everyone to be able to sign up yet you
32:00 uh awt templates are another big one for
32:06 um basically these tools they're all
32:10 um where they let you query from the
32:15 um and if the the minimum security that
32:20 they need to be able to do that is they
32:22 need to know which user is signed in and
32:24 so all of these companies in the
32:27 documentation they publish like this is
32:28 the form of JWT that you need to send me
32:31 and we kind of can generate those jwts
32:35 for someone so if I do if I just create
32:42 Sarah won I can come here and
32:50 you know I'm just gonna do it on window
32:52 but there's a there's hooks for this as
33:09 but so this this is kind of ready in the
33:17 um to talk to Sarah graphql endpoint and
33:22 so you can see it's got all these like
33:23 history claims in it
33:26 um and so we do that with a bunch of
33:28 database vendors it's auth has become
33:30 rather far-reaching I'd say
33:33 um with react I think with stripe we
33:35 want to do more and more
33:39 uh you know talking very specifically
33:43 right you brought up redirect to
33:45 checkout you moved that from the client
33:50 um we would love to bring it back to the
33:52 client because a lot in a lot of cases
33:54 what people are doing is they go to the
33:56 server just so that they can pass in a
34:01 um in a lot of cases like not all cases
34:03 but in a lot of cases like that's the
34:04 only thing you're getting populated in
34:06 there and since we know which user is
34:08 signed in we can do that on behalf
34:12 bring redirect to checkout back to the
34:14 client so there's a lot that we're like
34:17 thinking through and and kind of
34:19 figuring out hey what is the best
34:22 structure for a truly like modern take
34:27 on off as a service because it's it's
34:29 not just that login box anymore there's
34:32 so much more where user state is getting
34:37 so I guess the the next uh logical step
34:39 from here or at least like the one that
34:41 is in my brain from doing so much stripe
34:44 stuff is like okay how do we go make the
34:46 API call to create the stripe customer
34:48 and then stuff that in this user model
34:51 and I saw a couple different fields in
34:54 the API but I was curious like what your
34:56 official take is would you put that in
34:58 like some metadata or I saw like an
35:01 external accounts property on the user
35:03 um so like yeah yeah
35:06 um so there are a couple ways to go
35:11 um I think in practice the most
35:14 common way today is that people have
35:17 like a stripe customers
35:20 uh table in their database and that's
35:22 like a a join table so a mapping of
35:25 clerk user ID to stripe customer ID
35:28 um some people do store it on our user
35:33 I guess I should show probably just the
35:38 like okay you have an API endpoint
35:40 how do you figure out what user is
35:46 um and we can do that pretty quickly
35:50 um so for all back end stuff on next.js
36:00 and I will go to clerk docs and grab the
36:11 you've done this before
36:14 uh I you say that but I think we
36:17 launched this like last Monday so oh wow
36:19 uh we launched the new middleware
36:22 approach so we've always had a way to
36:24 get it from the back end
36:27 but we changed the DX a little bit
36:32 but yeah so now if I go to let's see I
36:35 think next.js ships a
36:57 off that didn't pop it up all right
37:15 and then I pass it the request object
37:18 and then we'll just pass through
37:21 but we'll just return the user ID here
37:30 see is it is this a significant error to
37:34 the point where it won't build I'm not
37:42 so yeah this between the middleware and
37:45 the API endpoint this gets you
37:48 the user ID the clerk user ID and then
37:51 with that and this is all secure it uses
37:54 the JWT the JWT refreshes every minute
37:59 and so uh yeah like it only takes a
38:03 millisecond on the back end and you get
38:08 um if you're doing any like auditing
38:10 sometimes it's also helpful to have the
38:12 session ID so the session ID kind of
38:18 and so the session ID is there too if
38:21 you want to do any like audit logging
38:25 and yeah I guess once you have
38:30 should I what do you think I should do
38:32 should I jump into the Skype well we
38:35 actually have a question from Christian
38:38 um and he asks on the clerk uses
38:40 third-party JavaScript modal message
38:42 there's a message that says redirect
38:44 required and asking whether or not that
38:47 message is customizable
38:49 so there's no need to customize it uh it
38:53 doesn't exist in production so
38:56 um and it doesn't exist in Chrome and I
38:58 think it won't exist anywhere before the
39:01 end of the year uh basically what you're
39:05 uh everything in this demo so far has
39:11 um but where like we didn't set up any
39:15 back end right like that step wasn't
39:16 there the back end that's kind of
39:19 powering the session State uh and
39:22 managing who's logged in is on a
39:24 different domain and it's actually on
39:28 uh clerk front-end API domain and that's
39:32 in your environment file
39:35 oh that's what that front end key thing
39:42 if you kind of you let's go here
39:47 open up the network tab
39:50 I'm gonna have to click refresh
39:53 and so basically all of the off state is
40:02 so this is that that front-end API
40:04 domain uh and this is how we're managing
40:07 auth in development since this is a
40:09 different domain than localhost 3000
40:12 we're using third-party cookies
40:15 um we found a way to do it without
40:17 third-party cookies but
40:22 for a couple months and just click
40:23 through that on stripe and Firefox
40:26 or not driving Firefox on Safari and
40:28 Firefox if you actually go
40:36 you look at the same API endpoints
40:44 so first of all there's a lot less going
40:45 on in the query string just because
40:47 everything's more simplified we're using
40:49 an HTTP only cookie in prod and the
40:51 reason we're able to use an HTTP only
40:53 cookie is because we're actually we have
40:56 developers and prods set a cname
41:00 to uh yeah to our API
41:05 so that's what's going on there uh you
41:08 cannot customize that redirect required
41:10 thing but your end users won't see it so
41:12 hopefully that's okay
41:16 um the other thing I noticed too was
41:17 there were some web hooks so that's like
41:21 the middleware piece and then if you
41:23 wanted to be notified about different
41:24 events that are firing when the maybe
41:27 like when the user uses that user button
41:29 and then updates something like maybe
41:31 they're yeah I don't know their phone
41:33 number or something and then you want to
41:34 know like other phone number change
41:35 because now I have to update it in my
41:37 twilio connector thing or something
41:39 related to that yeah yeah no that's
41:43 uh exactly right so
41:47 in the dashboard there's
41:50 a web hook section uh we're actually
41:53 using a tool called Spix to power these
41:57 um which is another uh another company
41:59 I'd say like on this thesis of
42:02 provide entire uis to people instead of
42:06 um his clerk didn't build this UI and oh
42:09 wow we are grateful for them building it
42:14 um uh yeah and so uh there's a whole
42:19 bunch of things that you can subscribe
42:21 to organizations we haven't covered yet
42:24 um the reason why is that there's no
42:29 well I'll talk about it in a second but
42:32 yeah so user created deleted updated
42:34 those web hooks are all there
42:38 only 20 of our users turn on web Hooks
42:43 uh the common mode of operation is to
42:48 just let clerk handle your users table
42:51 uh your sessions table and so on and
42:54 then for any like anything that's
42:56 augmenting users do it in-house but if
43:01 they're available there for you
43:03 so what I'm imagining now is like okay
43:06 I'm going to set up a an endpoint inside
43:08 of clerk that will let me know when a
43:11 user is created or created deleted and
43:14 updated and when a user is created I'm
43:16 gonna make an API call to stripe to
43:18 create the stripe customer and then when
43:21 it comes back I'm going to store both
43:22 the clerk user ID and the stripe
43:25 customer ID in a database table
43:28 um locally and then that's the sort of
43:30 join that you're talking about right
43:31 like okay exactly yeah you can either do
43:34 it that way or like a just in time
43:37 um so when a request comes in
43:42 basically here you would you know query
43:47 your database see hey do I have a
43:51 um a striped customer ID for this user
43:57 go create one save it and then return
44:04 there is metadata on the clerk object so
44:10 save it directly to the clerk object if
44:18 but it's it's really just user
44:20 preference of like got it where do they
44:22 want metadata to live sure so if you
44:25 don't have a database if you let's say
44:27 that you wanted you wanted the clerk to
44:30 be your users table basically or like
44:32 your database of users then another
44:34 thing that you could do is like okay
44:36 when I receive the user.created event
44:38 from clerk I will update that user
44:42 so they have the stripe customer ID and
44:46 like plop it on the metadata for that
44:48 user object and then I know like from
44:50 now on it should have stripe customer ID
44:53 exactly and I'm just trying to see if I
44:59 exactly how to do this this is what we
45:03 uh let's try clerk API
45:10 I don't know it would be users
45:17 I feel like it's my typescript is
45:24 or I'm just totally
45:27 having the wrong names here
45:30 it wouldn't be a demo without it right I
45:37 so in this part are we looking at the
45:39 node SDK or are we looking at
45:42 clerk like when you when you installed
45:46 clerk thing did that also pull in the
45:50 I think the docks here are a little uh
45:55 um got it and so yeah basically it is
46:00 the node SDK our node SDK and our SDK
46:04 are kind of converging right now and so
46:06 the docs are in a little bit of a
46:14 yeah so it looks like if you pull in
46:17 clerk from clerk SDK node then you can
46:20 do like clerk.users Dot
46:27 it should be backwards compatible so
46:29 maybe I should just try that I'm gonna
46:33 box on a different screen here just bear
46:35 with me a second sure
46:44 um while you're doing that Javier asked
46:48 um when do we do training in Spanish we
46:51 have had one video one or two videos in
46:53 Spanish on the stripe Developers YouTube
46:57 um so if you want to head over and check
46:58 those out they are pretty
47:00 um out of date they're they're pretty
47:03 um but yeah if that's something that
47:05 you're interested in we absolutely would
47:07 love to create content in Spanish and
47:10 also if that is something that you are
47:11 an expert in then we would love to have
47:14 you uh collaborate with us to create
47:16 some some Spanish content I know that
47:19 Mike going to the Dominican Republic
47:21 maybe fingers crossed will make some
47:23 good connections there so we can uh make
47:26 some Spanish content yeah I think so
47:29 we'll work on it I think yeah
47:33 all right I think I hit a breakthrough
47:36 here so it was clear client not click
47:44 pass in the user ID and then we have
47:46 this public metadata
47:48 um and you can either do public or
47:51 private I should just add a private here
47:58 is that just like the public metadata
48:00 will be available on the front end with
48:02 the like inside the JWT stuff that's the
48:09 if I go to localhost now
48:15 I'm just gonna keep I should just show
48:20 in react actually so if I go to my index
48:39 and then we'll just do div
48:53 based on stringify it maybe
48:58 what do I want here like no
49:02 yeah I should do it switch these to
49:13 the user object yeah there it is okay so
49:16 here's my public metadata
49:19 um and the private metadata isn't here
49:23 for the purpose of what you're saying
49:24 like all right some data you do want on
49:26 the front end public cannot be changed
49:28 from the front end it can only be
49:31 uh set from the back end but it can be
49:33 read from the front end
49:35 um there is a last one called unsafe
49:40 and that one you can set on the front
49:42 end and uh it's for like I would only
49:45 really do that for like I don't know
49:47 like an analytics use case or like a
49:49 quick and dirty a B test or something
49:52 but if you want you can
50:08 pillows and worlds yeah oh yeah you
50:11 actually saw it up there yeah it showed
50:12 up right away you didn't even have to
50:14 click whoa that's cool
50:18 um so yeah and so we definitely have
50:21 customers that have just set the stripe
50:23 ID on public metadata
50:27 and then they just they can just work
50:28 with that sure very cool
50:35 that's a lot of stuff yeah that's a
50:38 that's a pretty tidy demo uh Colin
50:42 um from the clerk standpoint so next is
50:45 supported what other uh Frameworks are
50:49 yeah so uh let's check out
50:54 our and then this docs here it's the
50:59 um so as of right now we have next remix
51:02 uh just straight react if you're using
51:04 Straight react Redwood Gatsby
51:09 um so we do work with the Expo tutorial
51:12 does work with uh react native as well
51:16 um yeah doing something on mobile that
51:18 should work for you
51:20 cool yeah so kind of anywhere you're
51:22 going to be writing your react it feels
51:24 like there's uh there's somewhere for a
51:26 click to plug in exactly yeah I think uh
51:29 I said this before the call but if
51:31 people think of us as off zero for react
51:32 I'll take it I think
51:35 we very much have invested you know more
51:40 um then I I think any any other auth
51:45 yeah super cool so I see we're kind of
51:48 getting towards the end of the hour I
51:49 want to make sure uh our friends who are
51:51 watching if you have any questions drop
51:52 them in the chat and we'll we'll uh make
51:53 sure to uh ask Colin your questions
51:56 before we get off the uh stream here
51:59 um Colin one question I have for you is
52:01 are there features for clerk that you're
52:03 excited about or that you're looking
52:05 forward to uh bringing to life in the
52:08 yes organization management uh-huh
52:11 that's the next big one for us so
52:15 basically everything you saw today
52:22 user profile and even the user button
52:26 um there's the organization side of it
52:28 so if you're a B2B SAS
52:30 um after someone signs up the first
52:33 thing they need to do is usually create
52:34 an organization and then invite their
52:37 team members and set their roles and
52:40 oftentimes they can create more than one
52:43 organization and then there's a little
52:44 organization switcher in the top left
52:47 opposite the user button in the top
52:51 and so we're going to provide that
52:53 organization switcher component we're
52:55 going to provide the uis to create an
52:57 organization to manage people's roles
53:00 and permissions and that should be alive
53:06 um the apis for it already exists and so
53:08 when I was going through the web the web
53:11 organizations uh reference and so that's
53:15 what that's referring to apis are done
53:16 we're working on the react side of it
53:19 um and that's that's really
53:21 the biggest you know short-term feature
53:25 uh but then it's it's just more of these
53:27 Integrations right like I would love
53:30 if clerk you know you go in the click
53:33 dashboard you do stripe connect and then
53:35 we're automatically creating the stripe
53:37 customer objects for every user and for
53:43 um because we'll have both sides of that
53:45 and then we can bring that redirect to
53:46 check out to the front end like that's
53:48 kind of the path we're going to down is
53:52 um getting more into
53:56 I had so many things are user-centric is
54:00 um and so uh the user got charged like
54:04 used to be this thing that you had in
54:05 your I'm dating myself and mirror like
54:08 your your rails model right your user.rb
54:11 the user.charge user.email use it at all
54:16 um user.verb uh and we're kind of trying
54:19 to provide that user.rb
54:24 as the service and taking a a broad lens
54:29 to it yeah I I feel like it's easy to to
54:34 glance over how staggering that amount
54:37 of work is and how cool it is to be able
54:38 to like plug in an app to that
54:40 especially if you're building an xjs app
54:42 and you have a react native mobile app
54:43 and suddenly you're like on the web and
54:45 on Android and on iOS and you have
54:47 authentication with LinkedIn and Twitter
54:49 and Google and you know you name it like
54:50 across the board that's a lot of stuff
54:52 that you don't have to do so you can go
54:54 and build your product which is the
54:55 thing that people want to use in the end
55:00 thank you thanks so much for having me
55:02 this is a lot of fun absolutely
55:05 yeah I didn't questions come in did not
55:08 see any questions we have a request for
55:10 uh some French language content
55:13 um we do have some French speakers so we
55:15 might be able to provide something like
55:16 that Christian I'm curious kind of what
55:18 topics you might want to see also if
55:20 you're watching this later and you have
55:22 some requests for Content or you have
55:24 ideas or things that you want to learn
55:26 about please let us know down in the
55:30 um but yeah again thanks again so much
55:32 Colin really really appreciate it any uh
55:35 parting parting thoughts Mike yeah Colin
55:37 my last question for you is so uh
55:40 assuming people have watched this
55:41 tutorial and they're ready to go off and
55:42 get running and start their Journey with
55:44 clerk where do they go
55:45 just click that dab
55:47 um there's a developers tab uh if you
55:51 want you can join our Discord we're
55:53 pretty active in there
55:55 um but yeah go to click.dev hit the docs
55:58 and and get going if
56:00 is really fast to get set up I think we
56:03 covered a ton of ground in this hour
56:08 awesome yeah very good you can also
56:10 follow at clerkdev on Twitter uh to yeah
56:14 I guess we'll that's where we can stay
56:18 exactly yeah make sure to chase down
56:20 Colin also his Twitter handles on the
56:22 screen at tweets by Colin uh I'm sure
56:25 you'd love to field your questions about
56:26 Clerk and uh CJ and I are always happy
56:28 to help with stripe stuff as well
56:34 let's call it a show thanks again so
56:37 much for watching and we'll see you next
56:39 time thanks Colin thank you
