![Cooper Codes](/img/default-banner.jpg)
- 87
- 1 480 068
Cooper Codes
United States
Registrace 15. 04. 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
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)
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)
Harris Donald Lee Barbara Lopez Margaret
Lewis Mark Hall Anthony Garcia Patricia
Jackson William Perez David Martinez George
Smith Angela Gonzalez Kevin Jones Nancy
Hernandez Donna Miller David Rodriguez Shirley
Davis Jennifer Lee Barbara Lewis Matthew
Taylor Maria Miller Amy Lee Linda
Taylor Linda Robinson Mark Lee Brian
Wilson James Lopez Melissa Jones Jason
I dont want to rewatch but where did you used client secret?
for vite VITE_URL="localhost:8000" let url = import.meta.env.VITE_URL; console.log(url)
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!
Dont I need to have refresh tokens ? If I have some publics scopes defined, can I access them anytime with the same access token ?
yes please
Thank you very much!
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';
This is only working on localhost. On life server, the popup email option is blank.
👏cool...i wonder how to integrate and work with db
Without github repo your 5 minutes video is useless. headache
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
only works on same browser. How can make it work so I can deploy on vercel
Thank you very much! Really appreciate this guide.
Why is my chat option not working and showing error?
64 line in server js error
Thanks a lot for making this video! This video really helped me understand this API 🫡🫡
dont forget to add any api route created in backend. must include it
helpful
VERY GOOD
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?
wonder if you could also shed some light in the verification part? especially the `g_csrf_token`
a m aee
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.
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
Very helpful... Thanks a lot
🔥
EPIC.
Great tutorial, thx!
this is so dope. Great delivery and description 5stars
Thanks
message of love
If you are teaching, why dont you have time? we have enough time to learn
A bit confused on how to get those end point url from spotify but otherwise great tutorial
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
Did u figure out a solution for this? Even i want to implement it on react-native-web
czcams.com/video/ehmc1Zgu_EU/video.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?