SvelteKit Authentication Tutorial | Firebase Auth

Authentication is crucial for nearly every application. It can also be incredibly difficult to create a good authentication solution. This is where firebase comes in. Firebase makes it incredibly easy to create a secure authentication solution, and in this video I will be showing you how to setup firebase auth with SvelteKit.
#sveltekit #javascript #firebase
🔗 Resources
Vite init SvelteKit - kit.svelte.dev/
Firebase Docs - firebase.google.com/
Github repository - github.com/jamezmca/sveltekit...
🔥 Get More Content - Subscribe and click le notification bell to stay tuned for all the fun & exciting tutorials to come!
📚 Chapters
00:00 Introduction
00:30 Auth Demo
02:32 Init SvelteKit
03:29 Init Firebase
06:10 Implement Auth
🔖 Topics Covered
- SvelteKit Auth
- Firebase Auth
- Full Stack Security
- SvelteKit & Firebase

[@CouchBit]

This is honestly the clearest walkthrough of firebase+sveltekit I’ve seen so far! Amazing stuff
Would like a user data management course too, your explanations are so clear

[@CodeEnthusiast78912]

Thank you so much man, i was struggling with auth in svelte for weeks. Please do more sveltekit and firebase content, maybe with firestore.

[@Smoljames]

Loads of SvelteKit and firebase stuff to come :) glad you found it helpful

[@Noonzyism]

Great tutorial! I appreciate you leaving in the little mistakes and watching how you debug them - and got a laugh out of you calling yourself a muppet.

[@Smoljames]

Thanks for the comment!

[@j.villasmil9575]

What I like you the most it is how structured and organized is your code

[@paterfamilias01]

Great tutorial! Every other sveltekit auth tutorial is using supabase. Looking forward to a firestore video. Subscribed!

[@Smoljames]

Glad you enjoyed :) Firestore video coming very very soon

[@hrvoje_bartolin]

Thank you, it was exactly what I need! 🙂

[@kevinnaudy2628]

You are the best, i am french, i love your tutos

[@Smoljames]

Thanks for the comment - Glad you enjoy :)

[@atomparish]

Great content as always! Thanks

[@Smoljames]

thanks for the comment :)

[@viewee22]

Thank you so much!! I got it!

[@stevekelly4347]

Great tutorial, James in depth concise very informative best practices the whole nine yards , spot on. Also having a look at your crud node firebase-admin topnotch keep up the great work you are doing

[@Smoljames]

Thanks for the comment :) glad you enjoyed

[@mikejohneviota9293]

New to firebase thanks alot sir!!! Done subscribe hoping for more svelte and firebase content

[@Smoljames]

Loads more to come! Glad you enjoyed the video :)

[@mikejohneviota9293]

@@Smoljames Thanks alot sir!!! im sharing this to my friends

[@jkibble98]

Fantastic tutorial. Learned a whole bunch of stuff in the first 10 minutes that I struggled with for a week

[@Smoljames]

Thanks for the comment - glad the video helped :)

[@jkibble98]

@@Smoljames I also have to applaud for not using a bunch of additional esoteric libraries. Plain JS and CSS ftw.

[@Smoljames]

@@jkibble98 haha sometimes you can't beat classic JS and CSS

[@MultiChinmay]

Great tutorial...

[@otockian]

Dude the Firebase config can be shared publicly, all of those are public keys.

[@danielkrastev6786]

exactly

[@yordan.]

about to comment this

[@xicor9469]

Can you elaborate a bit on this? Is it because they are client side? How does one secure the same?

[@RisalFajar]

@@xicor9469 They're client side, it's safe to share them

[@user-gv9et1vw1i]

Great Tutorial!!!!
Thank you so much :) I was struggling with the reloading and getting the auth state and you did great on that.

[@Smoljames]

Glad you enjoyed the video and thanks for the comment :)

[@em11l]

You can use PUBLIC or SECRET for the env variables and then you don't need to use the import.meta.env part, you can directly import them with import {PUBLIC___ } from '$env/static/public' for example. Be careful, secret env keys can't be loaded in client side code.

[@martinloeffler2119]

Thanks for the good content
One question: What VS code extension are you using for the auto import?

[@Smoljames]

I think it's just the general VScode intellisense!

[@andrewlongman208]

Hey James, thanks for this - got me a great place with firebase + sveltekit. I've since been struggling to get user data in server files - have you any idea? I have been trying hooks but not getting far.
Keep up the content you're smashing it
Andrew

[@Smoljames]

cheers for the comment - as for your question, i've got a video coming out next weekend that'll discuss how we can access firebase data with the firestore and associate it with the authentication system; hopefully that will have the information you are looking for :)

[@stevekelly4347]

I am just in the process of adding James's client side auth workflow to the project working fairly well , though email verification would be nice to have though , hint hint

[@Smoljames]

@@stevekelly4347 haha nice work - hint taken!

[@JPJZQ]

Thanks man, great tutorial! You didn't use setPersistence, inMemoryPersistence right ?

[@Smoljames]

Thanks for the comment and you are correct, but you definitely could!

[@twd2]

Awesome

[@Smoljames]

Cheers for the comment

[@nat.serrano]

good video, do you have a video with the google provider auth?

[@j.villasmil9575]

By the way, what if there is admin user who can create other users and he needs to watch a table with all de users and with another fields like name or DNI?

[@RisalFajar]

Is that checks with getApps and deleteApp when initializing firebaseApp really necessary?

[@Smoljames]

Good question - I'm sure it's not with different configuration setups but I found that without it, I would get an empty firebase instance. No harm in trying it without and seeing if you have a different experience.

[@eyalgoren]

does this replace sveltefire?

[@fegreat2462]

17:15 why don't have unsubscribe() when compoment destroyed

[@ribasenric]

why async and await and not just `return signout(auth)`
You're not actually using any of the data from the signout method

[@Smoljames]

yea it's a fair point - if that works then no reason not to do it that way

[@ribasenric]

@@Smoljames cool. I see people do that all the time but Firebase recommends not awaiting, at least for Firestore. I thought maybe there was a reason for it.

[@Smoljames]

@@ribasenric haha yea if that works, then I was doing it because it consistent the methods that did require the asynchronous behaviour - plus technically I don't think it does any harm. If it doesn't need it then it's defo cleaner not to have it though :)

[@fcnealvillangca7943]

I still async await coz it looks cool and I can't sleep knowing one of my handlers is different 😅

[@Beyram1501]

I watched 1 hour of video just for him to not even try client routing, those protected routes do not work with a simple , there's no way it's this hard to implement a protected route on a framework in 2023, I'm going back to react, no need to change a winning team... al these folder structured routing frameworks think we make applications without even the slightest authentication. re-writing everything for the third time now, thanks sveltekit and thanks nextjs.

[@stefanwright1988]

Something I did slightly different that I disagreed with from the tutorial is, in the updateEmail function we're using an await, however we are updating the authStore BEFORE sending the update. I put the code into a then block after the await to update the authStore as shown below:
updateEmail: async (email: string) => {
await updateEmail(auth.currentUser, email).then(() => {
authStore.update(user => {
return {
...user, currentUser: {
...user.currentUser, email: email
}
}
})
})
}
This ensures that the updateEmail function completed successfully ensuring no confusion for the user when trying to update details

[@leepham7782]

I followed your tutorial about a month ago and thought it was great, my friend recently tried to do it and is running across an issue where he gets this error.
his code works with my env. variables but not his own and we're a lil lost as to why. Could you help us with this error message when trying to update an email? updating a password DOES work.
assert.ts:100 Uncaught (in promise) FirebaseError: Firebase: Please verify the new email before changing email. (auth/operation-not-allowed).
at _errorWithCustomMessage (assert.ts:100:18)
at _performFetchWithErrorHandling (index.ts:194:15)
at async _logoutIfInvalidated (invalidation.ts:32:12)
at async updateEmailOrPassword (account_info.ts:142:20)
at async Object.updateEmail (authStore.js?t=1694909215640:32:3)
at async HTMLFormElement.handleSubmit (AuthReset.svelte:18:57)

[@Smoljames]

Looks as if to be a permission error! Note - "Please verify the new email before changing email". I think if you verify the email it will resolve the problem :) Hope that helps!

[@leepham7782]

@@Smoljames it didn't it still gives me the same issues. So I think it might have to do with the project and when it was made? Could you try to start up a new project and then test with your new api keys to see if it allows you to update the email?
I did it using my old api keys and it worked, did it with a new accounts and it didn't work. same with my friend.
I also added in the sendEmailVerification method and was able to see that when I loaded my user, my currentUser showed emailVerified: true, so I really think there's something else going on?
If you're down for it, I could send you a zoom link or something to show you!