- 87
- 1 404 738
Cooper Codes
United States
เข้าร่วมเมื่อ 15 เม.ย. 2021
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
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
มุมมอง: 2 600
วีดีโอ
How to Use GPT-4V With Next.js 14 | Text Streaming, Image Upload, and More!
มุมมอง 6K8 หลายเดือนก่อน
🎓 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)
มุมมอง 3.7K9 หลายเดือนก่อน
🎓 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)
มุมมอง 6K9 หลายเดือนก่อน
🎓 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
มุมมอง 8K10 หลายเดือนก่อน
🎓 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)
มุมมอง 12K10 หลายเดือนก่อน
🎓 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
มุมมอง 2.3K10 หลายเดือนก่อน
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)
มุมมอง 6K10 หลายเดือนก่อน
🎓 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)
มุมมอง 14K11 หลายเดือนก่อน
🎓 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)
มุมมอง 9K11 หลายเดือนก่อน
🎓 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)
มุมมอง 10Kปีที่แล้ว
🎓 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)
มุมมอง 25Kปีที่แล้ว
🎓 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)
มุมมอง 5Kปีที่แล้ว
🎓 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
มุมมอง 18Kปีที่แล้ว
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)
มุมมอง 13Kปีที่แล้ว
🎓 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
มุมมอง 6Kปีที่แล้ว
SvelteKit Drag And Drop List With svelte-dnd-action
SvelteKit and TypeScript Course - Build A Type-Safe SvelteKit 1.0 App
มุมมอง 11Kปีที่แล้ว
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)
มุมมอง 78Kปีที่แล้ว
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)
มุมมอง 1.8Kปีที่แล้ว
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)
มุมมอง 23Kปีที่แล้ว
Build an Ecommerce Store With SvelteKit 1.0, Stripe API, and Skeleton UI (TypeScript Tutorial)
Use OpenAI API With React (Beginner OpenAI API Tutorial)
มุมมอง 9Kปีที่แล้ว
Use OpenAI API With React (Beginner OpenAI API Tutorial)
Build A Collaborative Code Editor with React, WebRTC, and Yjs
มุมมอง 11Kปีที่แล้ว
Build A Collaborative Code Editor with React, WebRTC, and Yjs
Build a Code Text Editor in React in 10 Minutes (Syntax Highlighting, Dark Theme)
มุมมอง 17Kปีที่แล้ว
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)
มุมมอง 3.3Kปีที่แล้ว
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)
มุมมอง 6Kปีที่แล้ว
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)
มุมมอง 35Kปีที่แล้ว
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)
มุมมอง 1.8Kปีที่แล้ว
You’re Watching Coding Tutorials Wrong (And How to Fix It)
Video Upload in React With Supabase Storage (PostgreSQL Video Storage)
มุมมอง 4.4Kปีที่แล้ว
Video Upload in React With Supabase Storage (PostgreSQL Video Storage)
Build An Image Gallery With Supabase Storage and React (Upload Images with Supabase)
มุมมอง 22Kปีที่แล้ว
Build An Image Gallery With Supabase Storage and React (Upload Images with Supabase)
th-cam.com/video/ehmc1Zgu_EU/w-d-xo.html does not work with sveltekit 2 and svelte 5. There is not even anymore
Amazing explanation thank you very much ♥
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]);
Could you explain this when i use nextjs? I have a error between server and client components
Is there a way to include news article links for the bot to learn and provide responses with that content?
How would you write unit tests for this?
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
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?
wish you could add delete functionality in every item
is this api need to be paid ?
but youa re the one who set dangerouslySetInnerHtml - coder is the attacker!
Hey, Is this works for searching podcast too? Thanks in advance man
this is a really, really good video
You are just a fabulous person, sharing great informations.
is this api need to be paid ?
@@user-cn5md1ri5w few hit tokens are free. But major are charging
Very helpful video, now supabase is much more easier !
Thanks for this man!
is this still same in sveltekit 2?
Thank you
2:50 I don't understand how text is grouped. Who decides or what decides they are grouped by the fact they are athletes and not their nationality? Or why is everything grouped together that says "Cooper" and why isn't it grouped together with all youtubers, humans, or programmers?
Really love you man......God bless you....What a great and crystal clear explanation.And lot of new tricks learned 🎉🎉🎉🙏🙏
thanks
thanks
How could I make it work in an Android app?
from 9:48 timestamp when you added the jwt id token, I've been lost and forced to start over, 2x time doing this 3rd time has to be the charm, great vid/tut, still some deprecated files also, and chatGPT cant find the solution, and can you post the scripts in a GitHub Repo?
Isn't CRA deprecated?
This is great, can you make a Svelte Native ... where we can make native IOS and android apps with svelte .. plzzzzzzzz
cool video, keep it up. ♥
Thanks man. That's nice tutorial, I like the result
Awesome video.. used this as a basis for TH-cam data Api and it worked wonders. Spent a week looking everywhere but this video cleared supabase oauth and api alltogether for me.
This video helped me figure out the syntax for the DND action library, thanks man!
keep getting error reading properties (reading'0') and it may have something to do with it not letting me use openai keys for free fsr but if i increase my limits will it work?
is it possbile to connect supabase? to custom chatgpt messagner
damn great, is it possbilt to connect chat messagner?
🙏🙏🙏
WTF!!!!! I've wasted hours/weeks/months in the docs section of Google APIs and this video has been here for TWO YEARS🤯🤯🤯🤯🤯... How tf am I just seeing this now. . . I subscribed asap!! THANK YOU
Womp Womp
NOICEEEEEEEE
thank you so much akhii
Thank you so much TwT
Thank you so much TwT
Thank you so much TwT
Why is it saying my current quota is exceeded and to check my billing plans and details for chatGPT? did the monetize their API?
Hey Cooper Codes! Excellent tutorial, I followed it to the end. I have one question though, you hadn't gone over how a user would log out. I was wondering if you could give a brief summary of the process that needs to happen for the user to log out. I can figure out the user deletion part as that isn't very difficult, but for logging out, how does it work for the JWT token?
Helpful video, great. thank you a lot. If you can make a video Tauri for HTML, CSS, and JavaScript.
God, you are a god fr. Just perfect
Thanks for you tutorial you just saved my life
the react-google-login library has been deprecated, any alternatives for that.
This is the most helpful video about understanding how to use the spotify API. My guy literally explains every single step! Amazing work! Thank you! This is the most helpful video about understanding how to use the spotify API. My guy literally explains every single step! Amazing work! Thank you! This is the most helpful video about understanding how to use the spotify API. My guy literally explains every single step! Amazing work! Thank you!
react-google-login > This package has been deprecated
Thank you so much, your presentation is excellent!!!
Tip. Don't just use duration-x with tailwindcss on the draggable items and avoid doing transition-all. do transition-colors transition-opacity duration-100 ... etc. if you don't the items will flicker like in the video.