And once we have covered that, we are going to use off zero course.
Hopefully you have signed up for account.
If you don't have already.
Now, we just need to log in.
Now, just keep in mind, though, of in the read me, you'll find all the steps that we're going to
be taking.
So just in case you get hung up, some of the steps, just come back and you can always do that.
So I'm going to log in online once you log in.
The first thing that we want to do, if you follow the read me that I provided.
We want to create a application.
Well, that's a start.
So we'll go with the application notice, of course.
This is the testing GitHub user that I use to create the application.
And then they also provide the old one.
So in this case, of course, we would want to create a new one.
We are looking for a name.
We must, must, must, must, must go with a single page web application online.
Let's come up with a name in my case is going to be geared hub users work.
So we're going to create a new application.
And once you create an app, they offer a quick start where you can pick, for example, which option
you're going to use, which of course is react.
So if you want, they provide a ton of useful information how you can set up authentication.
But of course, we'll cover that in the next few days as well.
So it's up to you.
If you get stuck, you can either read, read me or I provide it or you can fall along with official
documentation.
And we're looking for the settings tab because we would want to have the domain and the client I.D.
And he has these ones you can show publicly.
So as you want, you can set them up as Ian Re variables.
That's up to you.
But I purposely made them publicly available.
So it's not like just because you expose them, something's bad is going to happen.
But it's always up to you if you want.
You can, of course, store them in the EMV variables as well, because, of course, if you're pushing
up to a get up, you don't want maybe other people to use your credentials.
Now, what do you are looking for?
Like I said, is the domain and client I.D. and what I would want is to navigate to a indexed chance.
So I'm going to navigate back to an address and I'll set up two comments, one for Domain and the second
one for the client I.D., because this is where we'll wrap our application with the author provider.
And you can kind of already see, because I import it already from our packages.
And yes, all the dependencies have been entirely installed.
So you don't have to do that.
Then once we set this one up.
Very, very important part is to show, well, what is going to be our domain.
Now, keep in mind, though, it is going to change once we deploy our application to identify.
So at the moment, we're just talking about the local setup.
We have three places where we would need to add that.
So now we navigate back to read me.
And what you're looking for is, of course, the HTP local host, 3000.
Now, if you have a different port or different domain, I don't know why, but just in case you would
have it.
Of course, police set that up for your particular domain.
Now, in my case, I'm just using the default setup with create or yacked up.
So that's why I have as GDP local host 3000.
So either grab from the read me or type it out in the application in the all the zero application.
But I wouldn't suggest copying pasting from the URL bar because it's gonna add one more forward slash.
And once in a while you might run into some glitches.
So just make sure that is definitely issue.
DP and call on them to force lushes local host and then three thousand.
So I'm going to take this sucker.
Then I'm going to navigate back to my application online.
Allowed callback one than logout another one.
And then also we have web origins.
So copy paste and all these three places.
And then just make sure that you save.
That is a must.
Now, in a second, I'm going to show you how I set up the other application where eventually, of course,
once we push through production, we also need to add the you are all the domain that represents our
production application because of course, this is just now for testing for localhost.
But eventually, of course, we push our application to production and then we would need to set it
up where we also share that domain as well.
I'll show you that in a second.
But for now, just make sure, make sure make sure that you say the changes again otherwise.
You will be dealing.
We had a bunch of Irish.
Now let me quickly show you with my other app.
The testing one, it looks like, as far as the setup.
So notice here.
I have the real Zen karma.
So that's the syntax and then I have a local one.
So this is my domain.
I'll notify and then this is my local one.
So once you do that, then we just need to worry about the connections and we have multiple options.
So we have an option for email and password.
So is going to be with a database.
So you're going to have to create a database.
And then we have the social one.
The social one would be Google, Twitter and all that.
So let's try that.
We have our applications online.
We also have the connections sorry, in the connections.
Look for database.
Now, of course I already have one or I'm sorry, I already created actually two.
Let me quickly delete the testing one.
I was just trying to see what is going to happen.
So we're going to go testing DBI.
I'll delete this one.
So that's of course, how you can delete if you have the database.
But we're going to create a new one.
So what do you want right now is to head to database, so connections database and then create DB connection.
And we're gonna come up, we connection name.
We're gonna say get hub users.
Now you can click requires user name, but I'm just going to leave it off.
And that essentially just means that once you log in that the user name is going to be your password.
So if you're paying attention when the user logs in, the user name essentially is D.M. some had to
leave that option.
But of course, it's up to you.
Then we now the length, whatever you would want, of course we can create.
So we're creating a database and then we have all kinds of configuration options so we can decide what
kind of password policy are we're going to have.
Then, of course, we can set up a custom database and all that.
But for us, we're not going to care about that.
We only want a default setup because in my opinion, it's good enough.
And then we're looking for applications.
And what you want is to click or toggle, I guess, the application that you'd want to connect the database
to.
So my guess again, I have three.
I have Devall, the one I have the one that I built the application with, and I have the one that I
just created for the project that we're currently working on.
So, of course, what I'm going to do is click on the gate of users because that's the application out
one at yours.
So this is going to be a e mail.
The password set up.
But then also we have an option on the social one.
So I just removed the social connection.
So now I'm going to set the Mac where we go with create social connection and then we have tons of options.
Now, I'm going to go just with Google and Twitter because I personally don't use the Facebook.
Yeah, I don't see the point of adding ten of them because I only need to show you the main setup.
And then, of course, you can add yours ones later.
Where we're going to click onto Google and then keep in mind that eventually when you go to production,
you probably want to use your own client I.D. and client secrets.
But for development and for just showcasing Europe, of course, they nicely provide their own keys.
But again, it is expected that once you go fully in production with some kind of authentication app,
then yes, you'd, of course, provide your own client I.D. and they show you where you can get them
as far as Google, Twitter and all that.
So we'll just bravely click on a label.
So create ALM.
Sorry, create.
And then again, we need to connect to our application.
So in my case, I'm going to go with two because I removed it from the testing one, the one that's
showing.
And since I would still want to show it once in a while, I'm going to toggle it and I'm going to go
course for the one that we just created, the get up users.
And if you want, you can try the connection that is always an option where essentially they'll just
tell you that you need to sign it into an account.
And then once you do, once you sign into account, essentially they'll send it back here.
You successfully locked in.
Now I can go back to that dashboard.
So just keep that in mind that you can always try the connection.
Now, if I would want to set up more connections, I just go back.
I want to create connection.
And then in this case, I'm going to go for Twitter again, the same deal.
Nothing changes.
We create one.
And then again, we need to decide which apps we'd want to connect it to.
So in my case, I'm going to go with Michael Abuser's as well as does Thing Get Up user.
And again, I would want to right away tried to connection just in case something goes bananas.
So I'm being redirected and everything works.
So now of course, I can display the information and you can already kind of see that this is where
we are going.
To get our data.
So essentially, this is what we're going to have to name the picture and all that and wants if this
works.
Of course, we would just need to decide how we can set up our application using the off zero.
And for that, we're gonna have to look through the docs now in the read me.
I do provide to resources so wires for the main docs off off react.
And the second one is for react as the K API docs and you'll see the differences between the two.
And the way it works is we navigate to a site, to the main site again, where we were setting up our
application and all that.
We click on docs.
Then we look for the libraries.
And then in libraries, they have an option for single page apps.
But I went directly with a reaction because I found I want to be more straightforward.
So we go with Ortho, React, STK, and then in here, notice there's a separate link for the API one.
Once in a while, we'll toggle back and forth.
So I'll show you where I was getting the information.
Some specific information.
But in most cases, you can just follow this one along.
And I got it just started by installing the application and all that.
Which, of course, we already have.
And then the first thing you want to do is wrap our whole application in that auth provider.
So let's do that one first.
Let's wrap the provider.
And next videos, of course, we are going to set up these log-in functionality, logout and all that.
So we're going to navigate back to a index.
And we'll just follow the exact steps that they suggest.
So we need to import as a name, import off provider from off ortho react.
OK.
Awesome.
And then I'll wrap everything.
I'll also wrap my get a provider.
So I'm going to go with my off provider, make sure I wrap my whole application.
And then we need to provide three things domain client I.D. as well as this redirect.
You are I.
And of course, I'm going to grab all of them.
So we're going to navigate back health provider.
And then let's just get these vouchers.
That's why we're copying pasting.
So now first I'm going to get my domain.
Of course, this domain reflects the auto mind that we're getting.
Then this is gonna represent our client.
Like I said, if you want, you can set up the EMV variables.
That's up to you.
Because remember, you might be pushing this up to get up.
So, of course, it would make sense if you'd set them up as an entry variables.
And then we have our redirect one.
So once we save.
The indexation.
Then everything should work.
We should start moving along slowly by connecting to our off line, of course, having the logging log
out functionalities and all that.
So try to refresh.
If you don't get any egregious errors, everything should be fine.
So we can move along, of course, set up everything as far as the authentication.