hey there my world crafting Wizards today I want to give you a guide on how to set up OA with Wix this is great if you want to create an e-commerce store or if you want to work with wix's Services they have a lot of them like bookings and stuff like that and this will give you the ability to just sign in the user uh let Wix handle that and then you can keep track of all the users through the nice UI that they have and then after that again if they make any sales or any stuff like that they'll all get synced up with Wix so let me give you a guide we're going to be using nextjs uh because I couldn't really find any good examples out there so I thought I'd make this cool guide here what is that sound it's actually a big storm out there but why do we care we're developers we never go outside let's get going all righty so let's get going now I have an empty nextjs project here you can try remix as well or whichever flavor of Frameworks you want to uh but next is really popular so I thought I'd do a guide on this one so what I have here uh is if you don't have not worked with nextjs before don't worry it's not too hard to set up um if you search nextjs you can just run this command in your terminal here it's mpm create next app at latest all right so you want to get that copy that and once you copy that and paste it in the terminal here which you can do with control Tilda M vs code for example paste it in here it'll install everything here that you need okay so if you head over to your app here and the page TSX as you can see I only have a H1 here that just says Wicks off so if we view that in the browser there we go and I also set up a little nav here that just has a text here nothing else so that comes where is that cuz it's not rendered here that's rendered in the layout so if you go to the layout TSX here you can see we have a nav here the children here basically represents um all the different pages that could be swapped out okay now the nav if we go here is just a nav with again a H1 here that says headless store probably shouldn't have two H1s so let's update the uh let's go back here and update this to ah2 all right you should only have one H1 on your page um Okay cool so how do we get started well first we need to install some mpm packages so you can do that if you close up the terminal here and do mpmi and I already installed them so I'll just show you which ones you need um these are the ones uh I highly recommend you to install this because what we're going to do in the next video is we're going to build out a full e-commerce store using this authentification that we're using here as well okay so it's Wix stores Wix SDK members Ecom and that's pretty much it all right I also added um Shaden here for styling but that's not necessary that really isn't so again you can do Wix SDK Wix members and the rest of them so make sure you got that installed and after after you do you can run back mpm runev oh one more actually uh install JS cookie as well so JS cookie here and the types for the JS cookie we need this to access uh our cookies on client components in nextjs because otherwise you either need to do it through a server component or pass that down to a client component uh but this just makes it work a bit easier okay so let's get going what do we need well let's see where are we going to start off well the first thing we need to do is create a client and that client um is going to be our Wix client so through that you can do a lot of things pretty much anything uh that Wix allows you to do so whether that's you know creating posts deleting posts viewing posts um creating products you know checking out with a cards accessing payment methods accessing members and stuff like that so the place I like to put these little utility functions is in the lip file here so I'm going to make a new one and let's call this Wix client. TSX now I'm going to name this TSX because what we want to do essentially is use reacts context to basically inject it inside uh client components so this is going to be a client uh Wix client that's sorry to say but we're also going to have a Wix client for the server all right that can only run on the server server so this way you can access all the wick Services through a client component and a server component as well so this one again is specifically to access it through client components okay so let's head here to the top of the file we're going to do use client here at the top and then what we're going to do is say cons Wix client and set this equal to create client now this is going to come from the Wix SDK so that's going to automatically import that here we go and this can take in a buch of different options here so one is the modules again um this is kind of like what kind of services you want Wix to be able to access so you can do like products here if you want you can do collections for your CMS data you can have access to the current card for example redirects and members as well we're going to need members in this case for the login uh these are optional again we're going to expand this in the next video so let's just get these for now and you can import these through all the different uh SD case that we installed through mpm so for example members that comes from wigs members uh we can get redirects as well uh that comes from let's just import it here manually from do Wix this is coming from redirects see I don't think we install this but that's fine we won't even need this redirects for now let's import uh the current card as well so that comes from from the Wix Ecom and let's also do collections okay cool let's get rid of uh and products as well there we go so now through the WX client we have access to all of these different modules now before we can access this we need a way to authenticate and the way we can do that is by passing down an off method here and we're going to use the OA strategy here from the Wix SDK all right let's pop this open so this is going to need to take in a client ID now where can you get your client ID from if you head over let's head over to Wix Studio there we go so on your website here you can create a new website if you don't have one so let me just go here to manage so if you don't have one just do create a new site and that's it all right just create the site even though we're not building it through the site it needs to have a site to can redirect for the login and uh the sign up page and stuff like that or the checkout for the cart all right it's going to have its own custom page that Wix makes for you uh so for now again you can create a new site here or you can go to an existing one which I already have here so I'll just go to this one and you're going to see that you have a bunch of settings here right so you have your CMS if you want to create CMS stuff you have your sales and you also have your customers that you can access here so anyone that signs signs up uh through the wix Services is going to be all available here as you can see I already have a couple of test ones that I did but I can go here on the profile and see any orders that they did you can have access to the invoices for example or any subscriptions that you create okay anyway all we really need from here is going to be the client ID so you can head over here to settings to headless settings at the bottom and see I already made a bunch here you can just create a new client ID here and that's it and then you copy this over and before that also go to settings here you also will need to set the URLs here for the allow redirect domains to Local Host 3000 and Local Host 3000 down here as well so when you are getting redirected from the wix's sign up page or login page it needs to know kind of where to go and what's allowed uh because if it's another uh kind of if someone tries to inject in another URL for example right you don't want that to be authorized you only want to make sure that it's your domains that you set up here so when you go live with a website as well you can pass in the live domain where you have the website hosted but for now this is fine we can just copy and do it on Local Host because we are running in development mode okay so you can pass that down here if you create an EMV file in your root directory so as you can see we have one and I passed this down as next public wix's client ID all right and that's all we need so here now to access this all you need to do is prefix it with the process. EMV like that and then you can pass it down just like that all right cool one last thing we need is tokens now Wix is going to use these tokens to basically identify whoever visits the page like who are you are you a visitor are you a member already do you have any products that you bought here already so that's what we need to pass down here now initially when we create this client we're not going to have any of it but what we can do is read off uh the users's uh cookies and see if it's if there something already is there if there's not then we'll just set an empty value for now so let's do that I'll Define a refresh token here by oh sorry thises needs to be outside so I just go outside here so let's just go here to the top and I'm going to say refresh token I'm going to set this equal to json. pars and I'm going to say cookies uh dog get like that and I'm going to get the refresh token now again we don't have any of this set up so that's fine uh let's also import cookies from JS cookies since this is a client component there we go okay so we're trying to get the the refresh token here so let's take this and pass it down here all right so we'll do tokens let's open this up because it's going to be an object as you can see has two so access token is basically going to say hey what does this user has have access to which Services all right this is going to actually hold information of like the role of this user as a visitor the role of this user is a member with these specific things on it whereas the uh refresh token uh kind of checks that access token after a couple of minutes every couple of minutes and it says hey is this still crew are we still logged in are we still this user so those are the differences between the two so we can actually do that for this one as well so we can do access token here here we go and then here we can just say access token like that all right so we can pass these two down so I can say access token and refresh token like that okay cool now that we have this set up let's see what else we need to do here and this is pretty much all we need now we can take this and just export it like that so export cons to wix's client and we can hit save and that's pretty much it now that we have that set up if we refresh the page here let me just go here to our application I'll just get rid of this refresh token that we already have set here and access token I had this before I filmed the video so let's just refresh the page what I want here essentially is when the user initially visits the page I already want to have an access token added here and a refresh token added but that access token is going to be just like a visitor token and once the user signs in I want to essentially switch that and switch its roll over to a member token okay so essentially what we want to do now is when we head to the page set an access token here that's a visitor and the way we can do that is through middleware in nextjs so that middleware is going to run before every request as so before you get to a page or a server component it's going to run the middleware first so we can just go go here to our root uh application here and make a new file called middleware dots like that here at the top we are going to import that OA strategy and the create client that we had before let's go to the bottom here we're going to say export cons Middle where I'm going to set this equal to an async function this is going to take in the request and this is type of next request we'll open this up I'm going to get the cookie here and in this case now that we're working in a server environment here what's going on here oh I need to run the arrow function there we go um we can just access to cookies without any packages so we can say request. cookies like that we don't need to call it we can just pass it down like that I also get the response here so I'm going to say next response. next which allows us to continue um and then here I'll say if there's I'll try to get the cookies first I'll check hey is there a refresh token here if there is then I'll just return the response here all right so we just Skip and then we keep going uh to our server component or wherever we are otherwise here uh I'll create the Wix client here I'll say o off let's set up the O off strategy on this has decline ID what did I name this there we go let's just copy it over oops there we go and now what I want to do is set those tokens so you can just use the Wix client here to generate that you can see await Wix client o off generate visitor tokens like that and then on the response I can set the cookies for the refresh token and I'm going to say json.stringify tokens. refresh token not only that I'm also going to say res. cookies. set access token I'm going to set the what is it Json do stringify tokens. access token as well like that perfect all right so now that we have this set up um what we can also do is set maybe an age on this if you want so you can do it on refresh token here you can set a max age let's do 60 time 60 time 24 all right leave that in the comments the math let's see who gets it right okay that's pretty much it so now at the end here we can return rest which is going to again just kind of go to the next uh bit of our code all right so let's have a look now so if we head back to our application as you can see we don't have anything set up do a refresh boom would you look at that look at that we have an access token set up with an expiry date and the O off here and then the refresh token that has a value and holds the rooll and look at that and we have the visitor lovely I think we're ready to set up the login button now for our user so let me kind of show you how um we're going to do that in our components again I have a nav here and inside here I'm going to import this nav user like that all right so this is the nav User it's just a client component it's just a div with a H1 however the way I'm going to import this is just a tad bit different rather than doing it like this I'm going to be using this Dynamic feature up here so we're going to import it like this and what this is essentially going to allow us to do if you set SSR false here is you can work with the window object otherwise you're going to get an error Throne saying window is undefined that's because xjs will try to run everything on the server first and of course the window is not a thing on the server okay so let's head back to our nav user now and we can start hooking this up okay so what's the first thing we need to do well let's go here let's create a function that logs the user in so let's just do it all here you can again separate these into separate files if you want but I'll do it here so it's nice and easy for us to see okay so we're going to make a login request here and this is going to come from the Wix client so let's import that o off and here what we're going to do is say generate all of data like that and this is going to take in one argument here and that's basically going to be the redirect URI so in our case it's just going to be Local Host 3,000 so let's pass that down okay so we got that and next up what we want to do is go to our local storage and set an item here and we're going to set the or off redirect data all right just so we have context on um let's pass in this login request here here we go this is going to keep track of all the all the links that we set here for the redir qri and some custom data as well from Wix uh we're going to be able to view this in just a second last but not least we're going to need to get the actual o URL here and that's going to come from await we're going to say Wix client oaf do get of URL like that we're going to say login request so they're essentially going to return you a code and a token or a status uh that you can read from the URL uh and set that in your access token to essentially authenticate the user so here at the end you can see something like window. location oops hre and we can set that equal to this o off URL and you're going to see that our URL is going to update and that's pretty much it so that's how we do the login okay now let's start hooking this up a little bit uh let's head down here to our returns I'll just get rid of this and what I'm going to do here is do a let's do a button for now well let's see we can do wix's client here do o. is logged in where is it logged in like that and conditionally display uh either a button that's says signed in or the user so I'm going to do is logged in like that that's a Boolean I'm going to put a question mark here I'm going to render out a div like that otherwise I'm going to render out let's do a button here this is going to be a normal button that says sign in like that I'm going to put an on click on here that's going to have this login that we just made up here uh we can also control the UI a little bit of this so I can do something like create a state up here const loading and set loading I'm going to say use state I'm going to initialize it with a false value and here I'm going to set the loading to True when we initially start this and at the end here I'm going to set the loading back to false so here now I can see something like hey make sure this button is disabled when loading is true so I can just see loading there and also here I can conditionally render this with something like this I can say hey if loading is going on then say signing n otherwise we can say sign n there we go something like that um okay and then otherwise here right we want to display something else out let's just say logged for now and give this a go so let's head back here as you can see we have a nice sign in button there when I click this oh signning in and then would you look at that we get redirected over to the works page so here now this is all managed by them so you don't need to worry about actually hooking up Google off and getting your bloody uh app authorized and all of that jazz and we can just do it through here or like log in with email right and then you have to bcrypt everything and all that crap so I just do a Google and look at that we are getting signed back and look at that the URI here uh is getting set with a state and a code up here at the top right there we go now nothing happens uh because we need to update the access token and the refresh token to the one that we got back here otherwise we cannot read the user so that essentially doesn't really do anything but we know it works and the redirect and everything works so if we had here as you can see we still have a roll of visitor and none of this got updated so what we're going to do is create a little function here that's going to verify the user um after we get redirected back so let's head back here I'll do it here at the top I'm going to call this an Asing function and this is is going to be verify login like this let's open this up I'm going to try to get and parse the data here from the local storage we're going to say get item and I'm going to get this o off redirect data here like that and then what I'm going to do is try I'm going to say cons get the code and the state from the URL I'm going call the WX CLI I'm going to say off pars from URL that's essentially going to extract that state and that code from our URL here and after we have that what we can do then is actually pass it down to our cookies so um what we can do is say Wix client do o off. set tokens and we can pass it down like that sorry this tokens where is this from I'm silly we need to do up here we can say let's try and the try here we need to get the tokens await we're going to say Wix client. off. getet member tokens like that I can pass in the code the state and any additional data that we get here from the redirect and that's it I don't even think we need to set the tokens here on the client uh we can just set in in the cookies so let's do cookies. set and then let me just copy copy this over there we go so set the access token and the refresh token over to the tokens that we got here from the members okay now that's erroring up because we don't have cookies imported so let's just add that as well and that's pretty much it and then down here we can catch the error and say console log I just do something went wrong all right there we go so that's all set up now that's good to go last but not least what we need to do is run a use effect here so let's run a use effect and then we can just pass at the verify login here and this should run only when the user changes now we don't have the user here so how can we actually get the user let's head back here to our next have but the problem is that we're trying to fetch the user here on the server and this uh the other one the client that we have here in our lib this one is only going to work in a client component so what we're going to do is set up a similar uh little function that kind of looks almost like this one let's just call this Wix server. TS like that I'll paste this in here for you so you can see it so essentially it looks the same we're importing the same stuff again we're trying to read the refresh token here from the cookie store again here we we're not using JS cookies anymore so we can just read it like this uh straight from cookies from next header is here again I'm passing down the modules the O off and just returning that client okay so now we can use this in a server component as well so let's give that go so here we can see cons um let me think how going to do this what if we also do the fetching inside a new file let's do it here get user. TS like that so this is only going to run on the server we can mark it as well like that use server and I'm going to import this Wix client server that we just made what did I name it Wix client there we go um no it's Wix server wix there we go Wix server Wix client server there we go cool here I'm just going to run an export async function get user let's open this up I'm going to try to do a try and a catch here with an error here if there something went wrong we'll just return undefined because we couldn't get the user otherwise let's get the well they call a member here so let's call a member as well we can run in the wait Wix client server Dot o off sorry not o off we'll do members like that and we'll say get current member like that okay so oh and at the end here we can actually return the actual member like that so this is either going to return us the member or undefined it's as simple as that so now in our nav component here we can use that we can say cons user is equal to a wait get user like that simple as that and then we can optionally pass this down here as well like that okay so if we head over to our KN user we should be able to import that here so you'll have it access here and we can also pass down the types for this so nav user props let just Define it here type nav user props is equal to so we're going to have the user and the types for this uh I'm going to leave it and the types for this uh I'm going to leave it here for you um I'm going to paste it in a file here where the profile as you can see we have a nickname a slug a photo a cover and a title all right that's pretty much all you need to get from here let's actually head back to the G user here and just from the member here we can just get the profile directly like that cool so the type here is going to be the profile type let's import that and we are good to go okay so we're passing that user down here and now here as well we can do some conditional rendering so here if we're logged in uh rather than showing this we can just show the user but let's just see if this works so let's do sign in let's try it with Google and we are getting redirected and now if we let's try to refresh maybe oh yeah look at that now it says logged in now as you can see it did um instantly refresh because nextjs does some caching uh but we'll get through that as well okay so now that we're logged in well let's try and make the log out file as well so let's go here we're going to say log out we're going to run an async function again and we're going to say set is loading true as well there we go we'll remove the cookies right we don't want the access token or the refresh token to be there there anymore so let's pass that down like that and then we're going to say log out URL here is going to be await Wix client. off. log out like that and then we can just pass uh the window location href which is our current URL and then we can set is loading back to false there we go and then finally we can update the window location hre over to this new logout URL and that's pretty much it that's all we need to set up so now here let's customize this a bit rather than just saying logged here let's expand this div and what I want to do is add a image tag here so that comes from nextjs and then the alt here is going to be user Dot nickname the actual source for this image is going to be user dot photo URL there it is and then we need to set a custom width and height so I'll do 32 and 32 for both there we go lovely so we got the image tag and besides the image tag I also want a button here that says sign out so if we go here and add an onclick on this we can attach this little function that we made up here so log out all right let's give this a go let's head back here let's do a refresh it says K and read the nickname of the user let's add a question mark here at the beginning that might be it and there we go okay let's do a refresh um for some reason this is bre breaking let's actually try to Json stringify the user maybe we can figure it out let's pass the user down there so now if we refresh looks like this might just be undefined for now let's make sure here it says the user is a type of profile or undefined maybe we'll try to console log out the user here and see what happens in the terminal okay so it does say undefined oh we're never returning the member here so let's say return member and hit save there we go look at that boom there's the user bloody hell okay let's head back here and see now oh look at that we got the Json stringify we get the image and the sign out button as well so I just go back here and remove that Json stringify we don't need that anymore Perfect Look at that and finally let's add some Styles here we can add a class name say Flex to kind of put them one beside each other we can add a gap of six item Center there we go style it up a tad bit let's try the sign out as well so I'll click on it and look at that boom it refreshed the page as well so as you can see we don't have that caching issue anymore and now if we check the inspector here you're still going to see the you probably think oh okay so the access token and the refresh token got removed uh it did but at the same time the the middleware also ran after that so it just switched it back to a visitor role here as you can see okay so that's pretty much it we are good to go our authentification is done if you check here as well you're going to see that the member gets added here in the UI and one last thing we want to do is make sure that it refreshes after we sign in so to do that it's going to be super simple all we need to do is head here to the top and import router from use router next navigation and then here after this gets all finished here with the set loading after the login we can just run router. refresh and that should do the trick so let's head back here try the signing in oops my apologies we need to run this router refresh here uh in our verify login so let's paste that there instead okay let's give this a go so let's hit signing in so now that we go through the login process you're going to see when I hit login it's automatically going to refresh and then update the UI for us and look at that boom we are officially signed then so there we go that's a little tutorial here for you how to set up and work with off and Wix both on client and server side and then from here on you can expand on it and build your e-commerce website on top of it or your CMS block or whatever you want so that'll be the next episode really excited for that and yeah thank you so much for watching drop a subscri subscribe if you like this type of content and I'll see you in the next one peace