ClojureScript Google Authentication using Firebase (with Re-Frame)

hey what's happening guys in this video we're going to connect reframe with Firebase it's going to be awesome here we [Music] go so the first thing I want to do is create a reframe application and on the ca. website um there's a cool way like there's basically a guide on how to set up reframe with cver so I'm going to follow that um the first thing you want to do is get the reframe template and to use this we need line again so make sure you have line again installed there's a link Down Below on how to install it let's uh create a new reframe project so I'm just going to go to my terminal paste this in I'm going to call this reframe with Firebase super quick to make cool once it's done we can CD into it clear this and I'm going to open it in vs code cool once that's open um there are a few dependencies I want to just install off the bat the first one is rrisk and this will allow us to inspect the database for reframe um so it's kind of like you know like a Redux inspector so let's copy this and we go to Shadow cljs and we'll paste it in our dependencies and then we also on need to add this to a preload so here we go here and let's add it to our preloads for under Dev tools and I think that's done cool we don't need this anymore so I'm going to close it I also want to install a Prisa or promiser and what this will do is because we working with five b there are a lot of promises and this will just um make that process while working with the promises a lot easier so I'm going to copy this and add it also as a dependency say that then I'm going to open up the terminal again and what I want to do is install Firebase and we need fire base because this whole project is going to be using it and lastly I want to also just add this Secura class of CSS framework um I'm just going to use the CDN this will just style our application natively without having to add in classes it's just nice for like projects like this cool and under title we'll just add I'll link to the Sakura CSS then I want to make a Firebase application cool so I'm just going to call this reframe with Firebase cool it is what it is continue um whoa cancel continue let's create a use my default account create project cool while that's creating the project I'm just going to go back here to vs code cool we've installed Firebase and all our packages now I want to start this project using Culver so all we need to do there is open our command line pallet and say cver start a project and connect we're going to select the project type as Shadow cljs the build is going to be app and cool it's going to download our dependencies once that's done we want to connect to the app build and we can go to Local Host 8280 and see if this is working let's refresh doesn't seem happy let's inspect console 44 okay I don't know what was going on there but it's working now and if we open up this we can see we have access this is refres and we can see that we have a name field in our database with the value of reframe let's go and change that so if we go back into our project um we'll go to Source DB and here we have that name fied with a value of reframe let's change that to food list save that if we go back cool we need a refresh for that to update and cool we have our new database value there and let's just check if we can uh evaluate something in our repple so just underneath here I'm going to go plus one one and press contrl enter to evalue this to cool everything is connected everything is working let's save this I'm going to close actually I'll keep that open for now let's close all of this um let's close this let's go back to Firebase where we're creating our project it's now ready and what we want to do here is we want to um add a web app cool so let's call this food list web and let's register that app cool so we've installed Firebase so we don't need to do that but we do need to initialize our app so we need to import fb. apppp into our application so let's do that and I'm going to make a new name space here so in uh reframe with Firebase I'm going to create a new folder and I'm going to call it Firebase and then I'm going to create a new file here and I'm going to call it in it. cljs and this is where we're going to initi ize Firebase so let's save this and let's just minimize this on the side and um CA has put this here for me which is awesome and let's require F base so we can create we can require fire Base by using this require macro and we want to go here we want to include this Firebase app let's do that and I want to include this as um Firebase save this and evaluate this to make sure that all worked cool so now we should have access to F base so if I write comment and we just um print line F base and control enter on this yeah we see we have the Firebase object and all the functions and objects that are attached to that cool we're getting somewhere let's just close this output so we have more space let's initialize this app so I'm going to create a new function here I'm going to call it in it and basically what we want to do here is if we don't have a fire base app let's make one so essentially what we're going to say is when when there are no apps so when equals zero the length so we can use a length to get the length and um Firebase has a function called get apps whoa let's open up our output again and scroll down to our five base object and we can find a function here called get apps and it's a function and it basically returns our apps and we want to say if we don't have any apps let's initialize it so Firebase get apps when zero um that's when we want to initialize our app Curr line we just say initialize F base and to initialize F base let's go back to the docs um we need to pass through this file this config here so I'm just going to copy this and we need to pass it to this initialize app function so we can call Firebase initialize spell right app do spell it right I trust myself I'm just going to copy that object here save it and copy this function name paste it here just to make sure that that's not going to be an issue cool then I'm going to yep thanks copilot we need this hash JS to convert this map into a JavaScript map and of course we also need to make put the colons on the left hand side so let's just do that super quick save and we don't need any of these commas cool and this should work for in it so I'm going to Define this function let's just go back here continue to console make sure that our app is here so I'm just going to refresh this cool here has our food list web app this app is going to basically be we're going to log in and we're going to have a list of food and we're going to be able to add more food items to that list it's going to be very cool so let's go back here and uh evaluate this function and now we can in our comment block run it cool and it returns us basically it initializes the Firebase app and if we run it again we get nil because the app already exists so now let's get started with orth and to do that I'm going to go to the docs on authentication and authenticating using Google with JavaScript that's always we want we want to use this Google or provider so let's import that Sol long so we can go here we can go add that as a dependency five base or and we want the Google or provider so I'm just going to refer to that refer what's it Google just copy paste it out so we don't have to SP any mistakes let's evaluate this to make sure it's all good cool so just to show you that we have that we can print line and evaluate this check our output out and here we have the Google or provider object awesome let's go back here and let's see how we use that cool so I want to use this sign in with popup so we click a button we get a popup we sign in and we're logged in let's get it done like that so I'm going to go back to our project and underneath here I'm going to define a function and I'm going to call it uh Google sign in sing in sign in and it's going to take no arguments and let's just see how we do this here so we want to get the sign in with popup function and it's also from or so let's we want to grab both of these get or and sign in with popup because we're going to need those so let's import them here get rid of this comma save this evaluate this and I'm just going to get rid of these comments because you don't really need them it was just to demo that they were working and inside here I'm going to create a let binding and I want to bind uh and I want to add the provider and the provider is going to be this um this Google Au provider so how does this work we need to pass the provider here so let's create a new provider so Google all provider we create that's how we create a a provider and that comes from here so basically we're doing this new Google or provider with this Google or provider do syntax and then we need our or if we go back down we need to call get or and we can just call get o by running get or and now we have our provider and our authentication so now we want to call sign in with popup and pass through our authent provider so let's do that um in our left binding we'll go sign in with popup we'll pass through our orth and our provider cool let's evaluate this function and let's put it in a comment so Google sign in and I think if we evaluate this we'll see it in our front end so I'm going to execute it Y and then did you see that let's run it again oh man I'm just going to refresh this app cool let evaluates this name space evaluate our init function and then evaluate this Google signin function and then run init so we've initialized Firebase and if we run Google sign in we get the popup it is breaking the um all configuration not found okay cool I forgot about that we actually need to set up authentication with Google inside Firebase let's go back to our project and let's see how we do this we need all products authentication get started we're going to use the Google provider then we click enable support email just going to use my email address save cool now Google authentication is enabled I think that that's pretty much it let's run this Google sign in we should get a popup again let's refresh this and see what happened there it's think we can evaluate this whole file evaluate file it's from start to file cursor yeah run in it cool and then run this cool the authentication there is working well we can sign in but we haven't signed in it so basically what I want to do is after we sign in with our popup I want to set a user inside of our reframe DB so what I'm going to do is I'm not going to wait for this promise to resolve instead what I'm going to do is I'm going to use the on All State change event that Firebase provide so if we go back to Firebase let's go to manage users so click manage users and I want to use this on all stage on All State changed function which gets the user if it has the user I want to save it in frame otherwise I want to set the value in reframe to null so let's import this on All State changed function and add it here to the top on All State changed and I'm actually going to after we initialize the app I want to provide the Handler for this so we'll call on or stay changed and what does this take this takes or so we can call get or here and then takes a function which gets the user so basically takes a function with the user as the argument and here basically we want to store this user in reframe so we'll check if there is a user we will line user and that will be our user otherwise um we will set our user value to n set user to n cool beans so let's reevaluate our init function let's refresh our app so cool now we can use this thing again evaluate from starter file to cursor so now we've evaluated everything let's run in it so we've initialize Firebase and if we actually sign in with the user so I'm going to call Google sign in I'm going to sign with my account then we should see on Console um okay it sets the user to null initially because we don't have a user then it wants to store the user and here we have our user object so I'm so I'm going to make another function in this file and I'm going to call it store user and it's going to take this user object that we get back keep in mind this is a JavaScript object and I'm just going to keep using it as a JavaScript object for Simplicity so here in this function I want to create a reframe event which when we fire it will store the user inside our reframe DV so I'm going to open the side panel and under events I'm going to make a new um database event so let's go reframe oh man all of this auto complete Ridge event DB and I'm going to call this events um set user and it's going to have a function so we need the database and here we're going to destructure the event array so the first thing is going to be the event name which we're not going to use but I'm going to just leave it here to CL for clarification in case you don't know what it is and the next part is going to be the user and what we want to do is we want to return our database that we want to asso in that database uh a new user [Applause] and that user will be the user that we pass through save this and here we want to fire off that event so we're going to need to dispatch that event using reframe so from reframe it's import MEF frame. core we want to uh import the dispatch function for dispatch and we'll call that here so we want want to dispatch that event and dispatch takes in a vector with the event name and the value that we're passing through so we don't have the event name yet but the value will be well let's let's do this we'll create a l findinding here because we want to if there is a user we want to extract the map out of it otherwise we just want the value to be n so we'll say I'm going a user to store and we'll say if user it'll be a value otherwise it will be n and then we want to store this user to store and let's just import our event quickly before this gets a bit too confusing so we want to import this events name space and we want to import this set user event so from our project what's it reframe with filebase DB oh no events put this as events and then we can colon colon events slash safe user and this is how we link to um this keyword cool so we obviously need to put this inside of our r [Applause] findinding and we need to set the user to a map if we have it so if there is a user it's this map otherwise it's null and this map will just have I don't a uid and we can extract the uid by getting the property uid from the user and we want a display name I'm just going to say name and that will be the display name from our [Applause] user save this um evaluate this and instead of printing store user let's actually store this user so store user user and let's put this above this function so it can use it so we actually don't need this second we don't need this whole if statement because it's being handled in store user so I'm going to just get rid of this and just call store user without our user evaluate this evaluate our store user function and run our Google signin function again so now if we sign in go back to our application open up uh rrisk should see an event fire we don't see it fire and that's because we haven't reinitialized our um Firebase instance because we're exiting early based on this so what I'm going to do is just refresh our app go here refresh and now actually instead of like evaluating this by hand what I'm going to do is I'm going to go to our core. cljs and this is where our initial project just gets set up so after set up I'm just going to call well what I want to call is Firebase in it and now I want to import this Firebase um init function from this init namespace so let's go here and we'll go from reframe with Firebase Firebase do Emit and I'm going to call this as ifb so now if we click through to here it's going to call this function every time we refresh our app maybe if we just put it before this cool I wasn't sure what was going on here but I restarted my ripple and it seemed to work so now if we just refresh um and we go back to fire base.in it. cljs and we execute this Google signin function we should be able to sign in then it will execute this on or stay changed get or store a user and we should have our user in our table see cool and we do have our user here and we have the uid and the name of the user cool so now what I want to do is when the user is signed in I just want to view like the user detail just as a map on the screen just so we can see what we have so I'm going to go to views. cljs and I'm going to copy this subscription here we haven't made the new subscription that it will follow along the same lines instead of fetching the name I want to Fitch the user and instead of subscribing to the name I'm going to subscribe to the user so every time the user changes the this component will update and let's actually just create that subscription so I'm going to copy this and paste it here and we're going to fetch the user and that user is in the user key of our database so if we go here this is where the user sits um and we can go back to our view and let's render some hiccup that you know when we have a user and this is how we D reference our user so you have to use the at symbol when calling a subscription when um when we have a user and I can just show you the user from the DB if we evaluate this we can see we get a reagent uh atom so if you're familiar with atoms you know the ref and the ding I have a video on that let's create a div here using Hiccup and we'll say uh the logged in user is and we'll pass through the value of that user cool and now we can see that we have that value cool so now what I want to do is when we refresh the app we'll have no user but we're still logging in um but then we have a user so I just want to add that loading state so if we go to DB I'm going to add a new key here I'm going to call it um say user loading and I'm going to set it to let set it to true and we can actually add a question mark here to indicate that this is a Boolean value and then in our event when we set the user we can set user loading to false because we know what the value is and then in our views we can subscribe to that so let's go down here and we'll have loading and we can subscribe to user loading let's just create that subscription and we'll pull the user loading field from our database so we could say um it's when at loading yeah when loading we'll just have some text let's put in a div we say [Music] loading let's say when loading when loading and then we also don't have a user so and not user now if we refresh this we'll see loading and then we should see the logged in user cool so now what we need to do is be able to log the user out so to do that I'm going to create a button well we don't even have a button to log in the user let's create a button to log in and log out the user but let's first do the log out button so we can actually log out so when there is a user let's also create a logout button so I'm going to put this inside a div also so we'll have a button here and it will have the text log out and it will call the logout function that we don't have so let's create that logout function um this in it namespace could probably be divided into in it and or but I think this is fine um let's define uh pull it sign out sign out and let's see how we sign out a user on Firebase so here we can see in the OR package there's a sign out function so I'm just going to import that and to call it this is just copy this you just call sign out and pass through the orth so all we need to do is call sign out and pass through our or and call get or and let's use that function here so we'll make a function where on so on this button on click Handler on click what we want to do is we want to call a function which calls that sign out function cool and we need to import it so let's import from reframe which we call this project with Firebase and from Firebase do emit we want to import that sign out function so now if we go back to our page we should see that button and if we click this yeah we won't see anything we don't have a user we're not loading we just have nothing now what we're want to see is a login button so let's change this to an if this will be the logged out state so we'll create a div here and we'll say div you are not logged in and we'll just copy this button here we want to use that sign in with Google button so if we go to it we had Google sign in this is the function we want to call when you click this button back to our view cool Google sign in we'll import that function here go back here you are not logged in if we log in we should see our popup can sign in cool we click log out awesome now we have Firebase or in our application in the next video I want to show how we can store data inside fire base and use that with reframe so catch you in the next one guys I hope you enjoyed this one cheers also please don't forget to like And subscribe

Learn to implement Firebase authentication in your ClojureScript re-frame project! GitHub Link: https://github.com/danownsthisspace/re-frame-firebase-auth Get started with a re-frame project using this re-frame Template: https://calva.io/re-frame-template/ Debug and monitor your re-frame applications with re-frisk: https://github.com/flexsurfer/re-frisk Set up and manage your Firebase project via the Firebase Console: https://console.firebase.google.com/u/0/ Utilize Promesa for promise-based asynchronous operations: https://github.com/funcool/promesa Implement Google Sign-In with Firebase using the Google Sign-In - Firebase Documentation: https://firebase.google.com/docs/auth/web/google-signin Learn about Firebase's method for managing authentication state changes: https://firebase.google.com/docs/auth/web/manage-users Understand and configure authentication state persistence in Firebase: https://firebase.google.com/docs/auth/web/auth-state-persistence Explore Sakura for classless CSS styling in your web projects: https://oxal.org/projects/sakura/