Power your next app with Clerk + Supabase

Super Bass and clerk are a match made in heaven having the ability to manage your users with high converting components alongside databases or storage or real-time subscriptions really brings your application to life and in this video I'm going to be showing you how you can integrate clerk with super bass in a nexjs application here is the next JS application it's a simple to do application that has ability to add to Do's as well as see the current to-do's you had now we're in the code let's talk about what's been implemented already and what is left to do to make this application work so here we have all our components that draw the UI they're all under the components folder and then under Pages we have a sign in and a sign up implementation that allows you to use either oauth or username and password whatever you decide in your clerk application now if you've never set up clerk before there'll be a link in the top right hand corner right now that shows you how to get started with Clerk and xjs in five minutes then we also have our middleware here that just controls how the middleware is run with club inside our index.js holds the current code that is just stubbed UI and just contains a form that allows you to add and then underneath is a component that's driven by how many to-do's you have which is currently just an array of objects so first we need to go to Super Bass and we also need to go to the clerk dashboard to integrate them together so in my clock application on the dashboard and you want to head over to JWT templates select that one hit new template and select Sumo base as your option so we're going to select Super Bass and what that's going to do is it's going to give you these claims by default it's going to give you the email the role and then any app or user data that you may want to include you can add but this will suffice for your next JS application with Super Bass the next thing we need is this signing key which comes from Super Bass itself so if you head over to your super base and you go to your application here this is our to do application you can go ahead and select settings and then go to API right here and there'll be this JWT secret here that you're going to need so if you click this reveal button it will reveal that and then you should be able to copy it so let's go ahead and do that and then head back to the dashboard and paste that in to this valid signing key and then hit apply changes now you have a JWT template this JWT template allows you to integrate with Super Bass and show them that this person is either authenticated or has a specific role or whatever you might need to make your application work at this point what we need to do is make sure our Super Bass has the tables that we want then we just need to make a few changes to Super Bass to allow our users to be authenticated when they're trying to retrieve data and then only allowing users that are the same user to update a to-do so we head back into our Super Bass settings here and we'll go to our table editor so here we have our table that we're going to be used there is a user ID which will be the clerk user ID we have a created at time completed at time and a title and a note as you can see RLS is not enabled currently we need to do a bit of work here to make this work with Clerk and Super Bass together so now I'm ready to enable RLS so you can click this RLS button here and click new policy select get started quickly and then we're going to set a few things so first we want to be able to set enable read access for everyone so it doesn't matter if anyone can read which is fine so we'll select true and what we'll do here is we'll actually set this to authenticated so any authenticate users can indeed read from the table so we'll click this and we'll hit save so if you're not logged in you won't be able to access the API or try and read anything from our super best tables then we need another policy here which we can go ahead and do from here and we're going to say enable insert access for authenticated users only just the same idea except when we want it for inserts so we can say review and save policy so we've got these two policies and now we need a final one to allow only users that own a to-do to be able to update their data now the way this works with Clark is slightly different than what you're expecting there is a policy here that says you could do it with the email but we weren't able to do it with the user ID that we have so to do that you're going to go to the SQL editor right here select that one you're going to get a new query here and I'm going to put all of these queries in the description so this function is called requesting user ID and essentially what it does is it uses the JWT to allow us to have access to the user ID so when you run this function you're going to get no rows returned but it gives us access to the requesting user ID from the JWT that's coming from clerk so when you click around here you should get success no rows returned then we need to create a policy that allows us to grab the requesting user ID based upon that with this you can just create a policy called authenticated users can update their own to-do's so obviously if you're not doing a to-do's app and you're doing something else make sure you update this and then you set the author role to authenticated and then with check requesting user ID equals the user ID then when you run this you should get success no rows returned and then we can go back to our table queries here back in our table editor and then go to to do's and then go to RLS what you should see is this authenticated users can update their own to-do's now this has create our own policy and if we edit it here you'll see this role is authenticated and requesting user ID equals user ID and now this will make sure that whatever our user is doing whether they're trying to complete it's do or delete it whatever anything like that with the update they'll be able to do that and now we have everything set up at this point to start using our application so first you want to enable RLS so click enable RLS and click confirm and now this is enabled and this means that if you're not authenticated you can't read anything and if you're not the owner of a to do you won't be able to update it and of course you have to be logged in to insert it so now we need a couple of things for our actual nexjs application so if you go back to settings here and go back to API you're going to need to take this this URL and this Anonymous public key and you're going to put these in a DOT env.local with your clerk environments and both these can be next public because it's okay to show them on the client once you've done that we can start updating our code so now we're back in the code the way that super bass and clerk works is that when you instantiate the Super Bass client you need to pass it in the token for the user so that it knows which authenticated user is being used with ajwt so we want to create a new folder here we'll call it utils inside that utils we're going to create a new file and we'll call it Super Bass fly JS and in here is where we're going to create our Super Bass client the first thing you need to do is import create client and that comes from Super Bass slash Super Bass JS then we need to create an export here that's going to export our Super Bass client that we can use anywhere in our application and we're going to pass in something called Super Bass token and then inside of here is where we're going to actually create a client so we can do cons super base equal tools create client and then a correct client here is going to take two variables and that's going to be the Anon key and then the URL that you previously added to your dot m.local so go ahead and drop those in so now we have those now we need to create our header here so we can do the set of curly braces then do the word Global then headers and then inside of that headers we're going to have authorization then the authorization is going to be a bearer token so we can do Bearer space then dollar sign Super Bass token and then we can just return Super Bass and this will allow our users to log in into our application using Clerk and then have this Bearer token passed down to Super Bass at any time we want to make a request now remember jwts we clerk are short-lived so we want to make sure that every time you make a request or an update or whatever that you request a new token to pass down to Super Bass now I prefer to do code splits when it comes to making requests so I'm going to create a new utils here and we're going to call it super bass requests.js but you could just directly make these requests right in your application and it's entirely up to you it's now in our super based requests we can import our client so super bass client and that's going to come from Super Bass client and then we can export a const here called get to do's and that get to do's it's going to be an async function that's going to take two arguments user ID and token so inside of here we can create the client first so can't super base equals a week Super Bass client and then we need to pass in the token from our user which would be a JWT and then from now we can actually create our to Do's or whatever we want to use here so we can say const data to Do's equals and then away Super Bass Dot from and the from here will be whatever table we want so for that table it's going to be to do then we're going to tell it what we want to select so we're going to select everything and then we're going to do dot equals here so user underscore ID comma user ID so we're going to say that we only want the data that this user has and if they don't have any data we don't want it and then we can return to do's and now we have this we can use this in our index.js so we can update this now by using this Super Bass request to make them so the first thing we want to do is actually import use auth and that's going to come from at clerk slash next.js and this gives us the ability to retrieve authentication data when we need it so now we have use auth we can do const and then we're going to use our ID and token and we can pass those in from use auth and now we have the access to get this whenever we need it so now what we want to do is do a use effect to grab the to Do's whenever it's a first load and only on a first load so we can import both use effect and use state from react and we'll use those to both track that the state is moving and that we can obviously load our data on first load so now we can use use effect to grab our data from the database so we can do that by doing use effect and then we can pass in something here so we can call it const load to Do's equal to asynchronous function and we can use this to grab our data so what we need to do is first we need to grab a token so using this get token from auth so we can say const token equals await get token and we set the template so template to Super Bass and that is the JWT template that we called it so whatever you may have called it I'm assuming you called it super bass and kept it the default name that's what we'll be able to use and then we need to make the request to get to do so we have get to those imported up here from Super Bass requests then we can say const to-do's equals await get to Do's so we're going to get these to Do's now and we're going to pass in the user ID and then we have token which will be the the token that we've loaded here now we have to do's and we can just say set to-do's equal to to do's and at this point this should all load our to-do's and then we just need to make sure we actually run this function so we just wrote loads to do's and we just want to run it once so we'll just put an empty set here and now we should be able to load our to-do's in so let's go ahead and give this a shot you can see now all of that data that we had has loaded in on a use effect and is only the data associated with my user id but now we need to do this part which is to add a to-do which works in a similar fashion to the way that this works except for we want to do this on click so now we can create our new function here we'll call it export const add to do and it'll be asynchronous as well and we'll pass in three things here the user ID the token and the event and then from there we can just copy this because it's always going to be the same we do const data slash error equals weight Super Bass from and then we'll say the same param so to do's and then we'll do dot insert what we're going to insert here is going to be the user ID so user i e set that to user ID we'll set the title to event dot Target zero value and then we'll set the note equal to event dot Target one dot value and then we'll see if error log error and then we'll do a return here otherwise we'll just return data now we can use this inside of our index here as part of this type is submit so in this form submit we can use it here so we'll create a function up here that says const handle submit equal to sync event and then again we'll do these similar to what we did here first we need to add our add to do so add to do and then we'll pass in there as part of our thing here so we can just say can't to Do's equals await add to do and then we'll pass in event comma user ID and then we'll make sure that we create a token here so that it's fresh const token and then comma token and then we can just console log to Do's for now to make sure that this works and then we'll go ahead and add it to our submit here so instead of being this console added we'll just do handle submit and now let's launch let's give it a shot here here and say testing one two three four five six and then testing one two three hit add to do the page refreshed you can see that it was added down here so just add one more so we'll say hello world testing one two three four five we can see it's been added here but the experience is a bit weird right so the experience right now is that the user gets a page refresh which is strange so we can just go ahead and fix that while we're here so instead of doing this console.logs what we can do is actually use this load to Do's right so we have load to Do's so why don't we just use it so we can just do the same get to Do's here and set the to-do's to the same thing so we could just do const and we'll just make this add to do and then we can set it to the same thing and then we can just do event dot prevent default and that will stop it from refreshing and now we should be able to test test and we can click add to do here and you can see that this has now been requested but the page doesn't refresh so there you have it an introduction to how to use clerk with super bass in your next JS application if you did enjoy this video make sure to hit subscribe and of course make sure you check out clerk all the links will be in the description for this video alongside any code you may need and a starter guide

Channel: Clerk

Views: 8,844

Keywords: clerk auth, nextjs ath, nextjs auth, clerk supabase, supabase with clerk, clerk with supabase databases

Id: ICNulnfQvd8

Length: 16min 8sec (968 seconds)

Published: Thu Jan 12 2023