Cooper Codes
Cooper Codes
  • 87
  • 1 480 068
SvelteKit User Authentication With Auth.js | OAuth 2.0 Authentication
🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/
In this video we go into the SvelteKit integration of Auth.js, building an entire authentication system allowing you to use any OAuth 2.0 service. I also show off how to get the access token of a user for a given service, allowing you to communicate with any APIs related to your given OAuth 2.0 service. I decided to use GitHub authentication for this video, but you can really use anything you want. Thanks for watching!
Final project: github.com/coopercodes/sveltekitAuthJS
REMINDER: The GitHub link wont work above unless you create a .env file like shown in the video.
0:00 Project Showcase
1:00 SvelteKit Setup (@auth/sveltekit)
2:41 GitHub OAuth 2.0 Setup
6:30 Adding TailwindCSS (svelte-add tailwindcss)
7:50 Initializing Auth.js and SvelteKit (auth.ts)
11:17 Login User With Auth.js and SvelteKit
17:48 Show Logged In User
19:20 Sign Out User With Auth.js and SvelteKit
20:35 Get User Access Token For OAuth 2.0 Service
23:05 Use User Access Token To Access APIs
zhlédnutí: 3 454

Video

How to Use GPT-4V With Next.js 14 | Text Streaming, Image Upload, and More!
zhlédnutí 6KPřed 9 měsíci
🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/ 📩 Join CodeLetter by Cooper Codes, the 3 minute tech newsletter: thecodeletter.com Join the Cooper Codes Community: discord.gg/xvk3TK78Pe (Weekly calls, free resources, tutoring, and more!) In this video I use Next.js 14 and GPT-4V to analyze the image that a user uploads. This is a complete proje...
Introduction To Svelte Runes (Every Svelte Rune Explained)
zhlédnutí 3,9KPřed 11 měsíci
🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/ 📩 Join CodeLetter by Cooper Codes, the 3 minute tech newsletter: thecodeletter.com In this Svelte Runes tutorial I discuss the recently announced Svelte Runes functionality for Svelte 5. It is important to note that Svelte 5 has not been fully released yet, but the Svelte team is planning to move ...
Build A Linktree UI With Next.js 13 and NextUI 2.0 (NextUI Tutorial)
zhlédnutí 6KPřed 11 měsíci
🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/ In this video we build a Next.js 13 and NextUI 2.0 website with a LinkTree component which allows us to see the different links for a certain user. This video is a great introduction to NextUI, one of the best UI library options when working with Next.js 13. Whether you’re a Next.js 13 beginner, o...
OpenAI Embeddings Explained in 5 Minutes
zhlédnutí 10KPřed rokem
🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/ Embeddings are a massively important part of AI ecosystems. In this video we cover the basics of OpenAI Embeddings, and how they are relevant to creating software systems that utilize custom information through embeddings. Whether you want to create a chatbot, build an AI focused startup, or learn...
My New Favorite Next.js 13 UI Library (Radix UI Themes)
zhlédnutí 13KPřed rokem
🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/ Radix UI Themes is my new favorite Next.js 13 UI library. If you are looking for a component library to use for your next Next.js project, then I seriously suggest checking out Radix UI Themes. The styling from Radix UI Themes is amazing alongside their world class accessibility features already s...
Build a CRUD GraphQL API With Apollo Server V4, Couchbase, and TypeScript
zhlédnutí 2,5KPřed rokem
Try Couchbase free for 30 days at couchbase.com Join the Couchbase Discord community here: discord.gg/2X5b9hVXNG In this video I show you how to create a full CRUD GraphQL API using the latest technologies such as Apollo Server V4, Couchbase, GraphQL, and TypeScript. If you’re interested in backend API development, or learning a new database service such as Couchbase, then you will get a bunch ...
Build PostgreSQL Databases Faster With Supabase AI (AI SQL Editor)
zhlédnutí 7KPřed rokem
🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/ In this video I show off the newly announced Supabase AI functionality that allows you to easily create PostgreSQL databases with the assistance of AI tooling. We also are able to visualize our databases with the Supabase schema visualizer. The combination of these tools gives a powerful workflow ...
Turn Any SvelteKit Website Into A Desktop App With Tauri (Complete Windows Setup)
zhlédnutí 15KPřed rokem
🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/ In this video I show how to take SvelteKit websites and turn them into performant desktop applications. We do this by using a toolkit called Tauri, which allows you to build Desktop apps from modern frontend frameworks such as SvelteKit, Next.js, and more. Tauri is built on Rust, and allows us to ...
Build and Deploy a GPT-4 Chatbot in Next.js 13 With Streaming (Vercel AI SDK)
zhlédnutí 10KPřed rokem
🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/ In this video we create an entire GPT-4 chat application that allows us to have full conversations with GPT-4. We do this by utilizing the Vercel AI SDK (ai package on npm) to handle messages when using Next.js 13, and then create a stream data source on the backend. The API route we create in thi...
Build and Deploy A Pokemon App With Next.js 13 (App Directory, Pokemon API)
zhlédnutí 10KPřed rokem
🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/ In this video we create a Next.js 13 project that allows us to search for Pokemon using the Pokemon API (pokeapi.co/). The tutorial covers dynamic routing, API calls, server vs client components, and more! This is a great beginner Next.js 13 tutorial and allows you to see the entire development pr...
The Best Next.js 13.4 UI Library (shadcn/ui Setup and Tutorial)
zhlédnutí 25KPřed rokem
🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/ In this video we create a Next.js 13.4 project with the shadcn/ui UI library. We understand how to add new components to our application, how to create custom components, and how to build UI interfaces with the shadcn/ui library. This is a great introductory video, and should help those new to Nex...
SvelteKit Stores Using Local Storage With Skeleton UI (Persistent Store)
zhlédnutí 5KPřed rokem
🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/ In this video we go over how to use Local Storage alongside SvelteKit stores (Such as a writable) in order to create persistent states in our SvelteKit applications. We also use TypeScript to ensure that certain values inside of our SvelteKit store is typed to a certain interface we create during ...
Build a Chatbot With Custom Data Using ChatGPT and Supabase
zhlédnutí 19KPřed rokem
Thanks to Supabase for sponsoring this video! Check out the launch week here: supabase.com/launch-week Enjoying my videos? Sign up for more content here: www.coopercodes.com/ In this video we build a Supabase and OpenAI system that allows us to call an API endpoint with a question, and then get an answer based off our own CUSTOM data. Pretty impressive! This is done by using PostgreSQL vector s...
Build a ChatGPT Trading Bot With Real Time News (Alpaca Markets API / JavaScript)
zhlédnutí 15KPřed rokem
🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/ In this video we create a stock trading bot that uses ChatGPT and the Alpaca Markets API to trade against live news! This video is a great project for anyone who is looking to use ChatGPT functionality (or any other OpenAI API call) to enhance their trading, alongside making buys / sells to the ma...
SvelteKit Drag And Drop List With svelte-dnd-action
zhlédnutí 7KPřed rokem
SvelteKit Drag And Drop List With svelte-dnd-action
SvelteKit and TypeScript Course - Build A Type-Safe SvelteKit 1.0 App
zhlédnutí 12KPřed rokem
SvelteKit and TypeScript Course - Build A Type-Safe SvelteKit 1.0 App
Build A Chatbot With The ChatGPT API In React (gpt-3.5-turbo Tutorial)
zhlédnutí 84KPřed rokem
Build A Chatbot With The ChatGPT API In React (gpt-3.5-turbo Tutorial)
SvelteKit 1.0 Route Files Explained in 4 Minutes (SvelteKit 1.0 Routing Tutorial)
zhlédnutí 2KPřed rokem
SvelteKit 1.0 Route Files Explained in 4 Minutes (SvelteKit 1.0 Routing Tutorial)
Build an Ecommerce Store With SvelteKit 1.0, Stripe API, and Skeleton UI (TypeScript Tutorial)
zhlédnutí 23KPřed rokem
Build an Ecommerce Store With SvelteKit 1.0, Stripe API, and Skeleton UI (TypeScript Tutorial)
Use OpenAI API With React (Beginner OpenAI API Tutorial)
zhlédnutí 10KPřed rokem
Use OpenAI API With React (Beginner OpenAI API Tutorial)
Build A Collaborative Code Editor with React, WebRTC, and Yjs
zhlédnutí 12KPřed rokem
Build A Collaborative Code Editor with React, WebRTC, and Yjs
Build a Code Text Editor in React in 10 Minutes (Syntax Highlighting, Dark Theme)
zhlédnutí 18KPřed rokem
Build a Code Text Editor in React in 10 Minutes (Syntax Highlighting, Dark Theme)
Setup Prisma with Apollo Server V4 and MongoDB Atlas (Prisma Setup)
zhlédnutí 3,4KPřed rokem
Setup Prisma with Apollo Server V4 and MongoDB Atlas (Prisma Setup)
Build a To Do List With SvelteKit 1.0 (Beginner SvelteKit 1.0 Tutorial)
zhlédnutí 6KPřed rokem
Build a To Do List With SvelteKit 1.0 (Beginner SvelteKit 1.0 Tutorial)
Create Calendar Events in React With Google Calendar API and Supabase (Supabase Providers Tutorial)
zhlédnutí 39KPřed rokem
Create Calendar Events in React With Google Calendar API and Supabase (Supabase Providers Tutorial)
You’re Watching Coding Tutorials Wrong (And How to Fix It)
zhlédnutí 2,1KPřed rokem
You’re Watching Coding Tutorials Wrong (And How to Fix It)
Video Upload in React With Supabase Storage (PostgreSQL Video Storage)
zhlédnutí 4,7KPřed rokem
Video Upload in React With Supabase Storage (PostgreSQL Video Storage)
ChatGPT Won't Steal Your Job
zhlédnutí 576Před rokem
ChatGPT Won't Steal Your Job
Build An Image Gallery With Supabase Storage and React (Upload Images with Supabase)
zhlédnutí 23KPřed rokem
Build An Image Gallery With Supabase Storage and React (Upload Images with Supabase)

Komentáře

  • @garygasmackenzie1301
    @garygasmackenzie1301 Před 23 hodinami

    Harris Donald Lee Barbara Lopez Margaret

  • @GinaTurner-b6x
    @GinaTurner-b6x Před 2 dny

    Lewis Mark Hall Anthony Garcia Patricia

  • @DarleneAgee-c8r
    @DarleneAgee-c8r Před 2 dny

    Jackson William Perez David Martinez George

  • @BenjaminJames-m7z
    @BenjaminJames-m7z Před 2 dny

    Smith Angela Gonzalez Kevin Jones Nancy

  • @MatthewRachel-i7s
    @MatthewRachel-i7s Před 2 dny

    Hernandez Donna Miller David Rodriguez Shirley

  • @TitouanMathieuTitouanMathi-b2p

    Davis Jennifer Lee Barbara Lewis Matthew

  • @MelvilleAlbert-h2j
    @MelvilleAlbert-h2j Před 3 dny

    Taylor Maria Miller Amy Lee Linda

  • @CottonCamille-g9x
    @CottonCamille-g9x Před 4 dny

    Taylor Linda Robinson Mark Lee Brian

  • @AnnLipscomb-k1l
    @AnnLipscomb-k1l Před 4 dny

    Wilson James Lopez Melissa Jones Jason

  • @haldharpatel3915
    @haldharpatel3915 Před 7 dny

    I dont want to rewatch but where did you used client secret?

  • @Nishant__29
    @Nishant__29 Před 8 dny

    for vite VITE_URL="localhost:8000" let url = import.meta.env.VITE_URL; console.log(url)

  • @anujjadhav2175
    @anujjadhav2175 Před 11 dny

    This is the best, the explanation was too the point. This is my first time creating a OAuth authentication and I understood everything about the implementation part. The comments you write in between the code in really helpful!. Thank you so much!

  • @Gokuuubro
    @Gokuuubro Před 11 dny

    Dont I need to have refresh tokens ? If I have some publics scopes defined, can I access them anytime with the same access token ?

  • @nomore2970
    @nomore2970 Před 14 dny

    yes please

  • @MarkiMark01
    @MarkiMark01 Před 21 dnem

    Thank you very much!

  • @user-ye7jq9iz4k
    @user-ye7jq9iz4k Před 22 dny

    why my jwt_decode not working? TypeError: jwt_decode__WEBPACK_IMPORTED_MODULE_4__ is not a function. the I found : import { jwtDecode } from 'jwt-decode';

  • @user-ye7jq9iz4k
    @user-ye7jq9iz4k Před 22 dny

    This is only working on localhost. On life server, the popup email option is blank.

  • @henoknigatu7121
    @henoknigatu7121 Před 23 dny

    👏cool...i wonder how to integrate and work with db

  • @user-ye7jq9iz4k
    @user-ye7jq9iz4k Před 23 dny

    Without github repo your 5 minutes video is useless. headache

  • @muhammadathmafarhan3819

    I wonder how to send notification using Supabase with this Notification API. I try to find some tutorial about it in Google but there is no any tutorial

  • @durasaksham
    @durasaksham Před 24 dny

    only works on same browser. How can make it work so I can deploy on vercel

  • @jakubn.6572
    @jakubn.6572 Před 24 dny

    Thank you very much! Really appreciate this guide.

  • @SanzidaAkhterAnee-u5n

    Why is my chat option not working and showing error?

  • @AdamDahdah.
    @AdamDahdah. Před 25 dny

    64 line in server js error

  • @thanhuynh
    @thanhuynh Před 29 dny

    Thanks a lot for making this video! This video really helped me understand this API 🫡🫡

  • @bilalillahi6347
    @bilalillahi6347 Před měsícem

    dont forget to add any api route created in backend. must include it

  • @neilaldenescobin9150
    @neilaldenescobin9150 Před měsícem

    helpful

  • @2u841r
    @2u841r Před měsícem

    VERY GOOD

  • @webbophone3377
    @webbophone3377 Před měsícem

    Great video, thank you! What does it mean if permissions is set to "default"? Is that just the way it always is prior to the user accepting or denying?

  • @storyzcreator
    @storyzcreator Před měsícem

    wonder if you could also shed some light in the verification part? especially the `g_csrf_token`

  • @SubashBalasubramanianLatentVie

    Hello, index.html Using both async and defer together is technically allowed, but it does not follow the intended usage of these attributes and can cause confusion. According to the HTML specification, if both attributes are present, the async attribute takes precedence, and the defer attribute is ignore.

  • @funnyhilarious123
    @funnyhilarious123 Před měsícem

    hi its nt working-- The model `gpt-4` does not exist or you do not have access to it. pls help. i tried different gpt-3.5-turbo, its says quota insufficient even though its not

  • @mahdirafi6537
    @mahdirafi6537 Před měsícem

    Very helpful... Thanks a lot

  • @cv3787
    @cv3787 Před měsícem

    🔥

  • @zero3281
    @zero3281 Před měsícem

    EPIC.

  • @hongbo-wei
    @hongbo-wei Před měsícem

    Great tutorial, thx!

  • @TheRealJuggaloJoel
    @TheRealJuggaloJoel Před měsícem

    this is so dope. Great delivery and description 5stars

  • @mubarakdaher774
    @mubarakdaher774 Před měsícem

    Thanks

  • @fabian2314
    @fabian2314 Před měsícem

    message of love

  • @lateefmushtaq6059
    @lateefmushtaq6059 Před měsícem

    If you are teaching, why dont you have time? we have enough time to learn

  • @yonathegod
    @yonathegod Před měsícem

    A bit confused on how to get those end point url from spotify but otherwise great tutorial

  • @tanhnoinoilanh
    @tanhnoinoilanh Před měsícem

    Is there any one know why this button can't be displayed and the hook useGoogleLogin is not responded when using the webview of react native. How to solved that? Thanks

    • @kapilbadokar
      @kapilbadokar Před měsícem

      Did u figure out a solution for this? Even i want to implement it on react-native-web

  • @MultiLeechCZ
    @MultiLeechCZ Před měsícem

    czcams.com/video/ehmc1Zgu_EU/video.html does not work with sveltekit 2 and svelte 5. There is not even anymore

  • @ramyadam6280
    @ramyadam6280 Před měsícem

    Amazing explanation thank you very much ♥

  • @salimdellali1814
    @salimdellali1814 Před měsícem

    I was losing chat messages, and after hours of debugging , I found out that the state update was not the best. It is recommended to use the concept of "prevState" when updating a state that relies on an older version, in this example, instead of doing something like setMessages([...messages, newMessage]); Do this: setMessages((prevMessages) => [...prevMessages, newMessage]);

  • @adamor993
    @adamor993 Před měsícem

    Could you explain this when i use nextjs? I have a error between server and client components

  • @ericmasonco
    @ericmasonco Před měsícem

    Is there a way to include news article links for the bot to learn and provide responses with that content?

  • @zooroish
    @zooroish Před měsícem

    How would you write unit tests for this?

  • @TheNitrozwerg
    @TheNitrozwerg Před 2 měsíci

    I can't get this to work. I can move items, but items in the source as well as the target area affected by the dnd get hidden and don't reappear. The item arrays get adjusted just fine but the ui just does not render the contents properly

  • @willyjauregui6541
    @willyjauregui6541 Před 2 měsíci

    Thanks for the explanation. When storing embeddings, how does the system determine which phrase or words are similar to each other ? Does it assign weights according to some previous train or knowledge? Also, in the VectorDB , do we have the text associated with embedding or it's just the arrays? If so, the system needs to convert it to text again when retreiving the data?