Video cMr_RyEEsrM

[00:00] Hello guys, I continue my series of

[00:02] building a typical Laravel SAS. So today

[00:04] you will see a video number two from

[00:06] this new course on Laravel daily and

[00:09] topic of today will be sign in with

[00:10] Google and GitHub. So Laravel socialite

[00:13] but I will also show how to test it all

[00:16] locally. So generally in this course I

[00:18] want to get deeper into each subject

[00:21] that's why the videos are longer. So for

[00:23] example 13 minutes in this case which is

[00:25] not that typical for this YouTube

[00:27] channel. And also inside the course on

[00:29] Laravel daily, not on YouTube, you will

[00:31] get access to the repository from this

[00:33] lesson because now it's something

[00:35] actually created and built and something

[00:37] to analyze. So on YouTube, I will not

[00:39] publish the repository links. This will

[00:41] be for premium members of Laravel Daily.

[00:43] So subscribe to the membership. Anyway,

[00:45] let's get back to the content of signing

[00:47] in with Google or GitHub on top of

[00:50] LiveWire starter kit in this case. In

[00:52] this video, we'll talk about social

[00:54] login. Pretty typical function for every

[00:57] SAS. So someone could continue with

[00:59] Google or GitHub in our case. So we will

[01:01] add those features on top of the default

[01:04] livewire starter kit in this case. But

[01:06] the whole functionality is global not

[01:08] specifically about LiveWire. But I will

[01:10] show you how to add those buttons with

[01:13] Flux as well. But the main problem with

[01:15] such functionality in my experience over

[01:18] many projects is how do you actually

[01:20] test if it works? Because the hardest

[01:22] part is not to write Laravel code for

[01:24] this is to set up accounts, projects and

[01:28] credentials on Google, GitHub or other

[01:30] providers to make it all work together.

[01:33] So I will show you that in this video a

[01:35] bit later but for now we need to look at

[01:37] the main package that drives all that

[01:40] thing. I will zoom out. This is Laravel

[01:42] Socialite which can help you to login

[01:44] with GitHub, Google, Facebook or other

[01:47] providers. So in the documentation you

[01:49] may find the general instructions for

[01:52] how to set up the credentials and how to

[01:55] set up the authentication. So basically

[01:57] we need two URLs where to redirect to

[02:00] after someone clicks that button and

[02:03] also the call back from Google or GitHub

[02:05] to perform the user creation process. So

[02:09] first I will show you the code and then

[02:10] the demonstration how it works with

[02:12] Google and GitHub. And I already have

[02:14] written the code behind the scenes. To

[02:16] save you some time from watching me

[02:18] typing. This is my personal style, but I

[02:20] will explain it as thorough as I can. So

[02:23] first things first, we need to install

[02:24] Laravel socialite with just composer

[02:27] required. Nothing fancy here. Then we

[02:29] add those two rice that the commentation

[02:32] is talking about. We need to have

[02:34] redirect and we need to have call back.

[02:36] And in this case, since we are using

[02:38] multiple providers, this becomes a

[02:40] variable. Maybe in your case you're

[02:42] allowing just sign it with only GitHub

[02:44] or only Google then you may skip that

[02:47] one. And then we have socialite

[02:49] controller with that redirect powered by

[02:51] socialite driver redirect. Validate

[02:54] provider is a function inside. In here

[02:57] you just validate those providers that

[02:59] you support and then socialite takes

[03:02] care of where to redirect to and then if

[03:05] the signin is actually successful then

[03:07] it reaches the call back gets the user

[03:09] from the provider from that driver from

[03:12] GitHub or Google and then performs the

[03:14] eloquent operation first or create and

[03:17] then logs in the user and redirects back

[03:20] to homepage or dashboard. Now these

[03:24] columns are new in the database. So for

[03:27] that we have a new migration adding

[03:28] those fields both nullable both string

[03:31] to the users table and also optionally

[03:34] this is debatable. You may change

[03:37] password to nullable because in case of

[03:40] user coming from social network the

[03:42] password is actually non-existent and

[03:45] then in the down migration you may

[03:47] return it back to nullable false. Also,

[03:50] of course, in the user model, we need to

[03:52] add those as fillables. Then, in the

[03:55] register or login blade, we need to add

[03:57] those buttons to those URLs. I asked AI

[04:00] cla to generate those buttons for me,

[04:03] and the result surprised me from a good

[04:05] site. It generated flux button with the

[04:08] icon. You saw that visually, but I can

[04:11] show it again. This is a zoomed in

[04:12] version, but it looks really good in my

[04:15] opinion. Really clean. This is again

[04:17] livewire starter kit thing with flux by

[04:19] the same kale porzio creator of livewire

[04:22] but the main thing that you need to know

[04:24] is route socialite redirect with the

[04:26] parameter your button may be styled

[04:28] differently it may be a link it may be

[04:30] whatever what you need to use is these

[04:33] two routes and then all the other form

[04:36] for signin stays as it was form register

[04:40] with all inputs based on your starter

[04:42] kit. So we're just adding new

[04:44] functionality here. And for that

[04:45] functionality to work, we need to

[04:47] configure the providers. And this is

[04:50] where I get to demonstrating Google and

[04:52] GitHub how to create those projects and

[04:54] how to set up these variables. So in the

[04:57] config services or in fact wherever but

[04:59] services is a typical file where you

[05:02] would store the credentials for

[05:04] thirdparty applications and you may

[05:06] structure them however you want but I

[05:08] just structure provider and then three

[05:10] credential variables and then after you

[05:13] set up the projects on Google and GitHub

[05:15] you fill them in in yourv file important

[05:18] part if you work with a team or in fact

[05:20] even if you don't env.ample

[05:23] so there is a file env.ample example

[05:25] that comes from default Laravel with

[05:27] default values for a lot of things. And

[05:30] this is important if you add new

[05:32] variables here. That file is pushed to

[05:35] the repository for other developers to

[05:38] see what variables and with what

[05:40] specific variable names they need to add

[05:43] to their.env files locally. So just a

[05:46] general rule, if you're adding new

[05:47] values to yourv, don't forget to add the

[05:50] same keys with empty values or with some

[05:53] default values intov.ample

[05:55] because not pushed to the repository to

[05:58] the GitHub. It's ignored for a reason of

[06:01] course for security butenv.ample

[06:04] is the one kind of set of rules for

[06:06] other developers and various automations

[06:09] for remote servers. And now I will

[06:11] demonstrate it to you in action. So

[06:12] we'll set up Google project, GitHub

[06:15] project and we'll test the social

[06:17] buttons from our local server. How to

[06:20] create a project in Google console to be

[06:22] used as Google signin. So you go to

[06:25] Google cloud console cloud Google com

[06:27] and then you choose a new project. In

[06:30] this case I open project picker and I

[06:32] have a lot of old projects but I choose

[06:35] new project. I have zoomed that in and

[06:37] you choose the project name whatever

[06:39] Laravel SAS course for example. Now we

[06:41] should go to APIs and services and here

[06:45] we need to create our o consent screen

[06:48] and of course we need to pick our new

[06:50] project because for some reason it's not

[06:52] automatically chosen. So let's click get

[06:55] started and you fill in the form. The

[06:57] name of the application you click next

[06:59] audience external then contact

[07:02] information is how you get notified

[07:06] and I agree with terms. Continue create

[07:10] and then you need to create O client

[07:13] application type web application name

[07:16] same Laravel SAS course which will be

[07:19] visible to your users and then this is

[07:22] important authorized redirect URIs and

[07:25] here we need to add our call back URL

[07:27] from our routes web this one. So in this

[07:30] case it will be o Google callback but

[07:34] what would be the actual URL we cannot

[07:37] use test domain locally I'm working with

[07:40] my Laravel herd so the domain is SAS

[07:43] test but it's not accessible from

[07:45] outside from Google or whatever provider

[07:49] and you have a few options here first

[07:51] Google allows you to have local host as

[07:53] a domain so HTTP local host or also

[07:57] HTTP127001

[07:59] like home but in my case I haven't found

[08:02] how to do that on Laravel herd because

[08:04] Laravel herd expects test domains

[08:07] another option is of course deploy that

[08:10] project to some server staging server

[08:12] and then have the real URL from there

[08:15] and the final option is to use external

[08:17] service to provide you the URL two most

[08:20] popular ones are and grock outside of

[08:23] Laravel community or in Laravel

[08:25] community there's expose by beyond code

[08:28] and also the same authors of Laravel

[08:30] Herd. So in Laravel Herd, you just enter

[08:33] the exposed token and you get the URL

[08:36] and you can try it for free. This is not

[08:38] a free service and Grock isn't free

[08:40] either. But let's try to register and

[08:43] get temporary free URL for now for this

[08:45] video. So here I am inside of expose

[08:47] dashboard and I choose via Laravel herd

[08:50] and I have the token to activate and in

[08:53] my Laravel herd in expose I just paste

[08:55] the token and then if we go back to

[08:57] Laravel herd documentation we need to

[08:59] run her share. So I go back to my

[09:02] terminal and launch hurt share expose

[09:06] black Friday deal and yeah I have the

[09:08] public URL that I can use for Google

[09:11] signin and in the free version of expose

[09:14] you have 1 hour to use that URL as I

[09:17] understand and if you follow that link

[09:20] in the browser I see laravel project

[09:22] great so it works let's try to set up in

[09:25] the Google signin so authorize redirect

[09:28] URIs I paste that URL o Google call back

[09:34] like this and that's it create and we

[09:37] should get the credentials so we have

[09:39] client ID which we need to paste in our

[09:42] env file inv.example example we have

[09:44] these without values then I copy them

[09:48] into env at the bottom for both Google

[09:51] and GitHub and for client ID this is

[09:53] exactly what we need so I paste this

[09:56] long client ID then I was expecting

[09:59] client secret to appear here but for

[10:01] some reason it didn't and download JSON

[10:03] doesn't work for some reason so I will

[10:06] click around and look for client secret

[10:08] oh so this is the explanation starting

[10:10] in November viewing and downloading

[10:12] client secret will no longer be

[10:14] available. But I have a client secret

[10:16] here and I can copy that with a button

[10:19] and paste in here in client secret. And

[10:22] finally, callback URL should be the same

[10:24] as Google redirect. So this one here,

[10:27] let's try it out. Here I am in my SAS

[10:29] test. I click login or register doesn't

[10:32] matter. They both have that button

[10:34] continue with Google. And that continue

[10:36] with Google gets us to redirect URL. So

[10:39] this one off Google redirect. And let's

[10:42] see what happens. I click here, continue

[10:44] with Google, choose an account to

[10:46] continue to share it with expose. Okay,

[10:49] I choose my email, sign in to shared

[10:52] with expose. This is kind of the

[10:53] downside if you're using some provider

[10:55] for that URL and I got the error and

[10:58] yeah, I forgot one thing in our

[11:01] socialite controller when working with

[11:03] expose or nrock where URL is different,

[11:05] you don't have the same session of user.

[11:08] So for that you need to change that to

[11:11] stateless redirect like this and same

[11:15] stateless user here and let's try that

[11:19] again. Log in continue with Google

[11:22] account sign in. And yeah I seem to be

[11:26] on the dashboard logged in but without

[11:28] any styling which means on that URL npm

[11:32] install hasn't been executed and CSS

[11:34] doesn't work. But basically if no errors

[11:37] that means that we have logged in

[11:38] successfully. If we go to our SAS test

[11:42] we don't have that session active

[11:44] because the session is on that expose

[11:46] URL but we have tested that Google

[11:49] signin actually works. I know it's not

[11:51] ideal scenario probably ideal scenario

[11:54] would be your own URL on some staging

[11:56] server which you then put inv file here

[12:00] instead of localhost or in fact good

[12:02] reminder I should change that to SAS.

[12:04] test, but for now it didn't cause any

[12:06] issues. But yeah, my personal preference

[12:09] actually is to test Google signin or

[12:11] GitHub signin a bit later on staging

[12:14] server when the project is out of local

[12:16] environment. But I just wanted to show

[12:18] you how to do that locally if you do

[12:20] want to make sure that the function

[12:22] works correctly. Now let's try the same

[12:24] thing for Google account. So to have

[12:27] Google application you have to go to

[12:29] settings and then in settings down below

[12:31] you have developer settings and then you

[12:34] go to oth apps in this case I will be

[12:36] using my personal GitHub account poor I

[12:39] also have Laravel daily kind of a

[12:40] corporate but it doesn't really matter

[12:42] you just click new o app here and you

[12:46] fill in the form with name and URL that

[12:48] doesn't really matter this is more like

[12:49] formal things and callback URL this is

[12:52] what does matter and to get that URL I

[12:54] will again launch her share because I'm

[12:57] shooting this part of the video later

[12:58] than 1 hour. So I have a new shared with

[13:02] exposed domain name which should work in

[13:04] the browser as well. Good. So now I can

[13:07] put that into GitHub here in the

[13:09] callback URL should be O GitHub call

[13:13] back.

[13:14] We register the application and in this

[13:17] case it's easier than Google. So you

[13:19] have client ID right away. you copy and

[13:22] paste it intov

[13:24] redirect URI should be the new URL so

[13:28] it's not even in sync so this one will

[13:30] not work anymore and here we put o

[13:33] GitHub call back like this and then

[13:37] client secret from GitHub we click on

[13:39] generate a new client secret and then I

[13:42] have this new client secret to copy and

[13:44] paste and of course I will delete all

[13:45] those applications after this video is

[13:48] done so that's why I'm kind of safely

[13:50] exposing osing those credentials and now

[13:52] we can try out GitHub sign in. So here I

[13:54] am in my register form again continue

[13:56] with GitHub authorize. As you can see

[13:59] this is the application name we entered

[14:01] authorize and yeah again we are on that

[14:04] shared withexposed.com domain without

[14:06] CSS which means that actually it is

[14:09] working and another proof that it's

[14:11] actually working in our local database

[14:13] we have this. So I have the name from

[14:16] GitHub account, the email, O provider, O

[14:19] ID and basically we have a new user in

[14:22] local database.