How to use JWT with SvelteKit and Strapi

Ғылым және технология

In this video we look at how SvelteKit can be used with JSON Web Tokens (JWT) in order to provide access to protected information from an API. In this scenario we use Strapi as a headless content management system which provides us with a user account that can be authenticated into. Once we authenticate into our user account from Strapi we us a JWT with SvelteKit in order to fetch protected data from our API to display in our profile.
If you enjoy my content you can find me on Twitter @BraydenGirard and make sure you are subscribed on KZread so you don't miss out on upcoming content!
/ braydengirard

Пікірлер: 62

  • @jlegolasUR
    @jlegolasUR3 жыл бұрын

    Just came back to Svelte for personal project, so had to revisit your channel. Happy to see new useful videos! :)

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    Thanks for the support, I’m hoping to do more soon.

  • @aljunk
    @aljunk2 жыл бұрын

    Thanks for posting! I am new to Svelte (and sveltekit) and it was helpful to see how you use it in general, but especially how you would call an api secured with jwt.

  • @chrismingay6005
    @chrismingay60052 жыл бұрын

    Great video thank you, you managed to cover everything I needed to finally get my head around JWT!

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    Glad I could help!

  • @billsmith1305
    @billsmith13052 жыл бұрын

    Excellent content in your videos Brayden! really good. I have a suggestion (or 2) to make it better for me at least. Why not close the vscode Explorer sidebar when you're writing code so we can see a whole line of code? And/or set the width of your file pane to the width of your screen space so it wraps.. Your dialog and pace is great! But not seeing text to back it up ... (like the professor on the whiteboard writing with his right hand and erasing with his left hand as he teaches.....). Alternatively, post the project to a GitHub repo at the end, AS IS, and then we could have the source there to follow along. its trivial and quick to create a new repo on github, upload what you have at the end. Takes like 60 seconds. Fire and forget.

  • @orki974
    @orki9742 жыл бұрын

    Really a great job in this presentation, thank you really much. As @Cameron Sims said, I also really would like to see a demonstration of svelte using Material UI. I hope you would continue to publish tutorial about svelte

  • @hadmelol
    @hadmelol2 жыл бұрын

    Would using hooks.js replace the need for custom GET/POST functions? The docs make it sound like the handle function in hooks.js can be used to send the Authorization header, but I can't get it to work. Thanks for the great video. Very well done.

  • @SutinInjitt
    @SutinInjitt3 жыл бұрын

    Big thank. Best video for me

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    Most welcome

  • @mohammad-aminebanaei886
    @mohammad-aminebanaei8863 жыл бұрын

    Hey, great video. Quick question : how is this leveraging or even using the SSR part of svelte kit ?

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    It's sort of baked in by default. You can choose to be more custom about it by telling certain pages to always or never be SSR.

  • @gasacchi6734
    @gasacchi67343 жыл бұрын

    Thanks, hope sveltekit stable will release soon.

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    I’m sure it will be a bit but I am also excited for that day!

  • @thecamguy
    @thecamguy3 жыл бұрын

    Thanks for your videos! Would love to see you integrate Material Design with Sveltekit

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    Might be something I look at in the future, thanks!

  • @shadowempire666
    @shadowempire666 Жыл бұрын

    Great tutorial! I tried it with current versions (svelte 3.50.1 / vite 3.1.0 / strapi 4.3.8). Migrated to new routing system (+page.svelte). But the I noticed, that strapi 4 uses another approach for creating a user. Maybe could you do a follow up video to make it work with the current versions? thx!

  • @davidgrana1268
    @davidgrana12682 жыл бұрын

    I want to use SvelteKit with Shopify, trying to build add to cart functionality, any thoughts?

  • @geliangzhu9136
    @geliangzhu91363 жыл бұрын

    code in github please.

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    I'm looking at doing this in the future, thanks for the feedback.

  • @seanraz
    @seanraz2 жыл бұрын

    great work, thanks

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    Thank you too!

  • @designmycity
    @designmycity5 ай бұрын

    Thanks!

  • @BraydenGirard

    @BraydenGirard

    5 ай бұрын

    Thank you!

  • @mbparvezme
    @mbparvezme2 жыл бұрын

    Great video. One question! Is it safe to store JWT in local storage? Could you please make a video on best practice of JWT?

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    I’m not an expert on security but I know there are some disadvantage to doing this. I would recommend reading up online there is a ton of content on JWT and security in the browser.

  • @ulvidamirli2758
    @ulvidamirli27583 жыл бұрын

    Thank you!

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    Thanks for watching!

  • @RicardoCamisa
    @RicardoCamisa Жыл бұрын

    Thanks so much for the wonderful class. Could you teach how to generate PDF with SvelteKit?

  • @hungviet8925
    @hungviet89253 жыл бұрын

    Thanks, can you make a video about simple websocket and sveltekit?

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    I’ll probably do some web socket stuff in the future!

  • @munawwiruljamal4149
    @munawwiruljamal41492 жыл бұрын

    Great video for newcomer like me

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    Glad I could help

  • @abdulhamidkhorajiya2256
    @abdulhamidkhorajiya22563 жыл бұрын

    thanks bro. please also include logout and protected routes and login redirect

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    Thanks for the ideas

  • @trace2portal
    @trace2portal3 жыл бұрын

    Nice video..... any contineu of this?

  • @BraydenGirard

    @BraydenGirard

    3 жыл бұрын

    More coming

  • @notme9432
    @notme94322 жыл бұрын

    how do i build svelte and put it on strapi, i want my app to run on one host. I can't find the answer anywhere. If doing so is not advisable, can you explain why?

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    With both Svelte and SvelteKit you could build your project for static hosting and then just put all of the built files in the Strapi public folder. Alternatively there is probably a clever way to get SvelteKit’s SSR working along with Strapi but this would be a little more complicated. Both options I wouldn’t recommend for security or scalability. Having your frontend coupled with the backend on the same server removes the benefits of JamStack. There are many reasons for this to not be recommended but the biggest I would be concerned about would be around performance. With them together, every user hitting your front end is also affecting the performance of your API. If you don’t expect a ton of traffic, this may not be an issue.

  • @notme9432

    @notme9432

    2 жыл бұрын

    @@BraydenGirard thanks for your answer, it's great

  • @alucavi8540

    @alucavi8540

    Жыл бұрын

    this can be done using strapi API to serve content to svelte + sveltekit. use pm2 to run the apps on a single host, with strapi on a subdomain.

  • @evolade4044
    @evolade40442 жыл бұрын

    Looking big brah

  • @encapsulatio
    @encapsulatio2 жыл бұрын

    Can you make please a guide on how to make static wordpress sites using Svelte?

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    Unfortunately I don’t do WordPress development. Thanks for watching!

  • @maskman4821
    @maskman48212 жыл бұрын

    Sir, I have a request, can you do a similiar tutorial on firebase auth in sveltekit route guard? 😃

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    Will try

  • @poshsincebirth898
    @poshsincebirth8982 жыл бұрын

    please keep us update with svelte

  • @somerandomchannel382
    @somerandomchannel3822 жыл бұрын

    any github code link? : )

  • @kirayamato6128
    @kirayamato61282 жыл бұрын

    Can we have the source code ?

  • @cotyhamilton
    @cotyhamilton2 жыл бұрын

    there is no name in the user model, where did that come from lol

  • @inmosh
    @inmosh Жыл бұрын

    But that's not SvelteKit tutorial. This example didn't use anything from the Kit. It's completely client side, no?

  • @Almighty_Flat_Earth
    @Almighty_Flat_Earth2 жыл бұрын

    Svelte/sveltekit is missing these critical features: 1. SCSS files 2. Autoprefix CSS vendor prefix. 3. HTML, scss, typescript in 3 separate files. 4. Http interceptor (angular) 5. Dark theme toggle and Many more...

  • @BraydenGirard

    @BraydenGirard

    2 жыл бұрын

    I’m sure things will be improved as the framework matures

  • @AviAlgaly
    @AviAlgaly Жыл бұрын

    function isJson(str) { try { JSON.parse(str); } catch (e) { return false; } return true; } function browserGet(key) { if (browser) { const item = localStorage.getItem(key); if (item && isJson(item)) { return JSON.parse(item); } else { return item; } } return null; }

  • @fpassx
    @fpassx2 жыл бұрын

    What about stale tokens ? Your fetch in profile/index.svelte will return a 400 and then, how and where do you renew the token ? thanks

Келесі