---
title: 'Video cMr_RyEEsrM'
source: 'https://youtube.com/watch?v=cMr_RyEEsrM'
video_id: 'cMr_RyEEsrM'
date: 2026-06-28
duration_sec: 864
---

# Video cMr_RyEEsrM

> Source: [Video cMr_RyEEsrM](https://youtube.com/watch?v=cMr_RyEEsrM)

## Summary

This video is part of a series on building a typical Laravel SaaS application. In this installment, the focus is on implementing social login with Google and GitHub using Laravel Socialite. The video also covers how to test this functionality locally, which is often the trickiest part due to the need for external provider credentials.

### Key Points

- **Series Introduction** [00:00] — The video is part of a series on building a Laravel SaaS, and this episode covers social login with Google and GitHub using Laravel Socialite.
- **Installing and Configuring Socialite** [01:40] — Install Laravel Socialite via Composer, add two routes (redirect and callback), and create a controller that handles the OAuth flow.
- **Database Migration** [03:24] — Add a migration to include provider name and provider ID columns to the users table, and optionally make the password field nullable.
- **Adding Buttons to Views** [03:55] — Add social login buttons to the register/login blade views using Flux components.
- **Configuring Providers** [04:57] — Store provider credentials in config/services.php and set environment variables in .env, remembering to update .env.example for team collaboration.
- **Setting Up Google Project** [06:20] — Demonstrates creating a Google OAuth project in Google Cloud Console, setting up the consent screen, and obtaining client ID and secret.
- **Using Expose for Local Testing** [08:17] — Uses Expose (by Beyond Code) to create a public URL for local testing, as OAuth providers need a publicly accessible callback URL.
- **Stateless Redirect Fix** [11:08] — When using Expose or ngrok, the session is not shared, so you must use stateless() on the Socialite redirect and user methods.
- **Setting Up GitHub and Testing** [12:24] — Demonstrates setting up a GitHub OAuth app, obtaining client ID and secret, and testing the sign-in flow locally.

## Transcript

Hello guys, I continue my series of
building a typical Laravel SAS. So today
you will see a video number two from
this new course on Laravel daily and
topic of today will be sign in with
Google and GitHub. So Laravel socialite
but I will also show how to test it all
locally. So generally in this course I
want to get deeper into each subject
that's why the videos are longer. So for
example 13 minutes in this case which is
not that typical for this YouTube
channel. And also inside the course on
Laravel daily, not on YouTube, you will
get access to the repository from this
lesson because now it's something
actually created and built and something
to analyze. So on YouTube, I will not
publish the repository links. This will
be for premium members of Laravel Daily.
So subscribe to the membership. Anyway,
let's get back to the content of signing
in with Google or GitHub on top of
LiveWire starter kit in this case. In
this video, we'll talk about social
login. Pretty typical function for every
SAS. So someone could continue with
Google or GitHub in our case. So we will
add those features on top of the default
livewire starter kit in this case. But
the whole functionality is global not
specifically about LiveWire. But I will
show you how to add those buttons with
Flux as well. But the main problem with
such functionality in my experience over
many projects is how do you actually
test if it works? Because the hardest
part is not to write Laravel code for
this is to set up accounts, projects and
credentials on Google, GitHub or other
providers to make it all work together.
So I will show you that in this video a
bit later but for now we need to look at
the main package that drives all that
thing. I will zoom out. This is Laravel
Socialite which can help you to login
with GitHub, Google, Facebook or other
providers. So in the documentation you
may find the general instructions for
how to set up the credentials and how to
set up the authentication. So basically
we need two URLs where to redirect to
after someone clicks that button and
also the call back from Google or GitHub
to perform the user creation process. So
first I will show you the code and then
the demonstration how it works with
Google and GitHub. And I already have
written the code behind the scenes. To
save you some time from watching me
typing. This is my personal style, but I
will explain it as thorough as I can. So
first things first, we need to install
Laravel socialite with just composer
required. Nothing fancy here. Then we
add those two rice that the commentation
is talking about. We need to have
redirect and we need to have call back.
And in this case, since we are using
multiple providers, this becomes a
variable. Maybe in your case you're
allowing just sign it with only GitHub
or only Google then you may skip that
one. And then we have socialite
controller with that redirect powered by
socialite driver redirect. Validate
provider is a function inside. In here
you just validate those providers that
you support and then socialite takes
care of where to redirect to and then if
the signin is actually successful then
it reaches the call back gets the user
from the provider from that driver from
GitHub or Google and then performs the
eloquent operation first or create and
then logs in the user and redirects back
to homepage or dashboard. Now these
columns are new in the database. So for
that we have a new migration adding
those fields both nullable both string
to the users table and also optionally
this is debatable. You may change
password to nullable because in case of
user coming from social network the
password is actually non-existent and
then in the down migration you may
return it back to nullable false. Also,
of course, in the user model, we need to
add those as fillables. Then, in the
register or login blade, we need to add
those buttons to those URLs. I asked AI
cla to generate those buttons for me,
and the result surprised me from a good
site. It generated flux button with the
icon. You saw that visually, but I can
show it again. This is a zoomed in
version, but it looks really good in my
opinion. Really clean. This is again
livewire starter kit thing with flux by
the same kale porzio creator of livewire
but the main thing that you need to know
is route socialite redirect with the
parameter your button may be styled
differently it may be a link it may be
whatever what you need to use is these
two routes and then all the other form
for signin stays as it was form register
with all inputs based on your starter
kit. So we're just adding new
functionality here. And for that
functionality to work, we need to
configure the providers. And this is
where I get to demonstrating Google and
GitHub how to create those projects and
how to set up these variables. So in the
config services or in fact wherever but
services is a typical file where you
would store the credentials for
thirdparty applications and you may
structure them however you want but I
just structure provider and then three
credential variables and then after you
set up the projects on Google and GitHub
you fill them in in yourv file important
part if you work with a team or in fact
even if you don't env.ample
so there is a file env.ample example
that comes from default Laravel with
default values for a lot of things. And
this is important if you add new
variables here. That file is pushed to
the repository for other developers to
see what variables and with what
specific variable names they need to add
to their.env files locally. So just a
general rule, if you're adding new
values to yourv, don't forget to add the
same keys with empty values or with some
default values intov.ample
because not pushed to the repository to
the GitHub. It's ignored for a reason of
course for security butenv.ample
is the one kind of set of rules for
other developers and various automations
for remote servers. And now I will
demonstrate it to you in action. So
we'll set up Google project, GitHub
project and we'll test the social
buttons from our local server. How to
create a project in Google console to be
used as Google signin. So you go to
Google cloud console cloud Google com
and then you choose a new project. In
this case I open project picker and I
have a lot of old projects but I choose
new project. I have zoomed that in and
you choose the project name whatever
Laravel SAS course for example. Now we
should go to APIs and services and here
we need to create our o consent screen
and of course we need to pick our new
project because for some reason it's not
automatically chosen. So let's click get
started and you fill in the form. The
name of the application you click next
audience external then contact
information is how you get notified
and I agree with terms. Continue create
and then you need to create O client
application type web application name
same Laravel SAS course which will be
visible to your users and then this is
important authorized redirect URIs and
here we need to add our call back URL
from our routes web this one. So in this
case it will be o Google callback but
what would be the actual URL we cannot
use test domain locally I'm working with
my Laravel herd so the domain is SAS
test but it's not accessible from
outside from Google or whatever provider
and you have a few options here first
Google allows you to have local host as
a domain so HTTP local host or also
HTTP127001
like home but in my case I haven't found
how to do that on Laravel herd because
Laravel herd expects test domains
another option is of course deploy that
project to some server staging server
and then have the real URL from there
and the final option is to use external
service to provide you the URL two most
popular ones are and grock outside of
Laravel community or in Laravel
community there's expose by beyond code
and also the same authors of Laravel
Herd. So in Laravel Herd, you just enter
the exposed token and you get the URL
and you can try it for free. This is not
a free service and Grock isn't free
either. But let's try to register and
get temporary free URL for now for this
video. So here I am inside of expose
dashboard and I choose via Laravel herd
and I have the token to activate and in
my Laravel herd in expose I just paste
the token and then if we go back to
Laravel herd documentation we need to
run her share. So I go back to my
terminal and launch hurt share expose
black Friday deal and yeah I have the
public URL that I can use for Google
signin and in the free version of expose
you have 1 hour to use that URL as I
understand and if you follow that link
in the browser I see laravel project
great so it works let's try to set up in
the Google signin so authorize redirect
URIs I paste that URL o Google call back
like this and that's it create and we
should get the credentials so we have
client ID which we need to paste in our
env file inv.example example we have
these without values then I copy them
into env at the bottom for both Google
and GitHub and for client ID this is
exactly what we need so I paste this
long client ID then I was expecting
client secret to appear here but for
some reason it didn't and download JSON
doesn't work for some reason so I will
click around and look for client secret
oh so this is the explanation starting
in November viewing and downloading
client secret will no longer be
available. But I have a client secret
here and I can copy that with a button
and paste in here in client secret. And
finally, callback URL should be the same
as Google redirect. So this one here,
let's try it out. Here I am in my SAS
test. I click login or register doesn't
matter. They both have that button
continue with Google. And that continue
with Google gets us to redirect URL. So
this one off Google redirect. And let's
see what happens. I click here, continue
with Google, choose an account to
continue to share it with expose. Okay,
I choose my email, sign in to shared
with expose. This is kind of the
downside if you're using some provider
for that URL and I got the error and
yeah, I forgot one thing in our
socialite controller when working with
expose or nrock where URL is different,
you don't have the same session of user.
So for that you need to change that to
stateless redirect like this and same
stateless user here and let's try that
again. Log in continue with Google
account sign in. And yeah I seem to be
on the dashboard logged in but without
any styling which means on that URL npm
install hasn't been executed and CSS
doesn't work. But basically if no errors
that means that we have logged in
successfully. If we go to our SAS test
we don't have that session active
because the session is on that expose
URL but we have tested that Google
signin actually works. I know it's not
ideal scenario probably ideal scenario
would be your own URL on some staging
server which you then put inv file here
instead of localhost or in fact good
reminder I should change that to SAS.
test, but for now it didn't cause any
issues. But yeah, my personal preference
actually is to test Google signin or
GitHub signin a bit later on staging
server when the project is out of local
environment. But I just wanted to show
you how to do that locally if you do
want to make sure that the function
works correctly. Now let's try the same
thing for Google account. So to have
Google application you have to go to
settings and then in settings down below
you have developer settings and then you
go to oth apps in this case I will be
using my personal GitHub account poor I
also have Laravel daily kind of a
corporate but it doesn't really matter
you just click new o app here and you
fill in the form with name and URL that
doesn't really matter this is more like
formal things and callback URL this is
what does matter and to get that URL I
will again launch her share because I'm
shooting this part of the video later
than 1 hour. So I have a new shared with
exposed domain name which should work in
the browser as well. Good. So now I can
put that into GitHub here in the
callback URL should be O GitHub call
back.
We register the application and in this
case it's easier than Google. So you
have client ID right away. you copy and
paste it intov
redirect URI should be the new URL so
it's not even in sync so this one will
not work anymore and here we put o
GitHub call back like this and then
client secret from GitHub we click on
generate a new client secret and then I
have this new client secret to copy and
paste and of course I will delete all
those applications after this video is
done so that's why I'm kind of safely
exposing osing those credentials and now
we can try out GitHub sign in. So here I
am in my register form again continue
with GitHub authorize. As you can see
this is the application name we entered
authorize and yeah again we are on that
shared withexposed.com domain without
CSS which means that actually it is
working and another proof that it's
actually working in our local database
we have this. So I have the name from
GitHub account, the email, O provider, O
ID and basically we have a new user in
local database.