►
From YouTube: Svelte-GoogleOAuth
Description
This is a screencast on Svelte with Google OAuth, we create a api server using express js and protect the server using Googles OAuth Library. Then we create a Svelte Store and manage the auth workflow within a Svelte Application.
Blog Post
https://blog.hyper63.com/svelte-google-oauth/
Github Repo
https://github.com/hyper63/google-auth-demo
A
A
A
A
A
A
A
I've
got
the
link,
it's
developers.google.com,
identity
sign
in
web
sign
in
is
the
site
and
then
follow
these
instructions.
But
the
biggest
thing
is:
is
you
want
to
go
and
create
your
credentials
for
and
just
follow
all
the
steps
in
the
create
credentials
process
which
will
give
you
a
client
id
and
then
you'll
use
that
client
id
to
build
your
web
application?
So
I'll
show
you
how
that
that
works.
A
So
that's
that
and
so
once
you
do,
that,
you're
gonna
get
a
client
id
and
you
just
wanna
keep
track
of
that
and
we'll
put
it
in
our
environment
settings.
So
let's
go
ahead
and
set
up
an
express
server,
so
we'll
go
into
the
api
folder
and
we're
just
going
to
do
yarn
edit
and
we're
going
to
do
yarn,
add
and
we're
going
to
use,
express
and
google
auth
library.
A
A
And
imp
from
ramda
and
then
let's
go
ahead
and
create
a
little
helper
function
down
here.
So
we're
going
to
create
this
function
called
extract
token,
and
this
function
is
going
to
take
a
request
and
it's
going
to
essentially
pull
the
bearer
token.
That's
included
in
the
request
from
the
header.
So
it's
just
going
to
extract
the
token
out
so
that
we
can
use
it
to
validate
and
when
you
submit
a
request,
you
put
headers
on
that
request.
A
A
Allow
for
everything
to
extract
appropriately
and
error
out
as
well
like
it
should
so
we're
going
to
split
that
string,
which
will
give
us
an
array
of
a
left
and
a
right,
and
we
will
just
want
to
get
the
last
item
in
that
array.
So
it
should
be
two
and
then
we're
gonna
extract
it
out.
So
that's
our
simple
extract
token
pipeline
and
now
we're
gonna
export
a
function
and
it'll
be
a
default
function
and
we're
going
to
take
in
this
client
id.
B
A
And
this
is
a
promise,
so
we're
going
to
create
a
little
pipeline
and
what
it's
going
to
give
us
is
a
a
ticket
and
that
ticket
will
allow
us
to
to
get
the
payload.
So
the
payload
would
be
like
the
user,
the
name,
an
id
email,
etc.
So
we're
gonna
essentially
assign
that
to
request.user
and
we'll
say,
dot
get
payload.
A
A
B
A
B
B
A
A
B
A
B
A
A
A
A
B
A
A
A
B
A
A
It's
kind
of
important
in
some
of
the
documentation
you'll
see
like
adding
props
like
a
sync
and
defer,
but
what
that
does
is
that
allows
our
app
to
load
before
that
gap?
Google,
api
and
that
doesn't
do
us
any
good
for
authentication
purposes.
So
so,
when
we're
building,
authentication
and
and
again
we're
kind
of
keeping
this
simple,
we
just
want
a
user
to
log
in
that
has
a
gmail
account
and
then
we
want
to
be
able
to
grab
the
token
and
send
it
to
our
api
and
verify
it.
A
So
we're
going
to
export
this
store
as
a
user
and
again
we'll
have
our
subscribe
function,
our
sign
in
and
log
out
functions.
So
what
we're
trying
to
do
is
is
keep
all
the
kind
of
authentication
functions
in
this
one
store.
So
we're
going
to
provide
a
sign
in
function
and
a
log
out
function,
and
if
the
store
is
not
null,
then
we
know
the
user
is
logged
in
so
we'll
be
able
to
just
say
you
know,
if
user,
and
if
it's
not
null,
then
we
know
throughout
our
app
that
the
user
is
logged
in.
A
A
A
Okay,
so
we
also
want
to
set
up
a
listener
that
will
update
our
store
whenever
the
user
kind
of
logs
in
or
logs
out,
so
we're
going
to
use,
authtube
dot
is
signed
in,
and
all
of
this
is
documented
in
their
reference
on
google,
but
this
listener
this
function
will
fire
every
time
a
sign-in
occurs
or
a
sign-out
occurs
and
it'll
just
return,
a
argument
that
we're
calling
logged
in
and
that's
going
to
be
either
true
or
false.
If
it's
true.
B
B
A
A
A
B
A
A
B
A
A
A
A
B
B
A
A
B
A
So
we
replace
that
and
then
what
that
should
do
is
in
the
auth.js
file.
It
should
replace
that
client
id
well,
we'll
know
pretty
quickly
if
it's
working
or
not,
and
then,
since
this
is
running
on
port
5000,
I
need
to
make
sure
in
my
credentials
that
I'm
supporting
localhost
5000-
and
I
am
so-
let's
bring
back
up
our
server.
A
A
B
B
B
A
B
A
A
B
B
B
B
B
A
B
A
B
A
A
A
A
A
B
A
A
B
A
A
You
can
create
a
you
know,
kind
of
a
shell
page
or
create
on
each
page,
this
check
or
if
user,
and
if
that
exists,
you
know
you're
logged
in
and
at
any
point
you
can
log
out,
then
that
user
will
be
set
to
null
and
yeah.
If
you
go
to
protected,
nothing
will
show
there.
You
can
obviously
show
that
you're
not
logged
in
go
to
the
login,
page,
etc.