SuperTokens
SuperTokens
  • 19
  • 48 130
Social Login in SolidJS in ~30 mins | Hacking with SuperTokens 006
Missed the previous episode? Catch up here: ua-cam.com/video/ovjTQ-20fk0/v-deo.html
Welcome to another episode of Hacking with SuperTokens!
In this session, we dive deeper into our SuperTokens integration with SolidJS by adding social login. Follow along as we create and configure social login buttons, and handle the authentication flow with Google, GitHub, and Apple.
🔍 What You'll Learn:
- Setting up social login buttons with SuperTokens and SolidJS
- Configuring OIDC providers (Google, GitHub, Apple) in SuperTokens
- Handling authentication callbacks
- (Ab)using Solid Signals for fun and profit
Whether you're building a new app or enhancing an existing one, this workshop provides practical tips and insights to implement secure and efficient social login functionality.
🔗 Related Links:
- SuperTokens Official Website: [supertokens.io](supertokens.io)
- Documentation: [supertokens.io/docs](supertokens.io/docs)
00:00 Introduction
00:20 Agenda
01:13 Creating social media buttons for OIDC
05:04 Setting up Google Sign-In
11:00 Handling the Google callback
18:04 Adding a loading "spinner"
22:07 Adding GitHub Sign-In
27:17 Handling the GitHub callback
30:52 Testing Google Sign-In
32:26 Adding Apple Sign-In
36:33 Testing Apple Sign-In
39:32 Debugging the Apple Sign-In callback
40:24 Successful Apple Sign-In
---
🔔 Follow Us
- Twitter: SuperTokens
- LinkedIn: www.linkedin.com/company/supertokens
- GitHub: github.com/supertokens/supertokens-core
Переглядів: 180

Відео

SuperTokens Community AMA: Roadmaps, Web3, and More - August 2024
Переглядів 812 місяці тому
Welcome to our latest SuperTokens Community AMA! In this session, we dive deep into various topics, including our product roadmap, the relevance of Web3, and the integration of web components. Join Darko, Rishabh, and the community as we discuss the future of authentication, decentralized technologies, and much more. Don't forget to like, subscribe, and hit the bell icon for more insightful dis...
Hacking with SuperTokens 005: Integrating SuperTokens with SolidJS
Переглядів 842 місяці тому
📺 Missed the previous episode? - ua-cam.com/video/-DZY4GB4_s4/v-deo.html Welcome to the fifth episode of "Hacking with SuperTokens"! Today, we're taking a step back from our web components experiments and diving into integrating SuperTokens inside a regular SolidJS project. Join us as we walk through the process of setting up authentication using the email/password strategy. 🚀 In This Episode: ...
Live Workshop: Integrating SuperTokens with Next.js
Переглядів 8152 місяці тому
Welcome to (the recording of) our live workshop on integrating SuperTokens with Next.js! 🎉 In this hands-on session, we guide you through setting up and configuring SuperTokens in a Next.js application. 🔍 What You'll Learn: - Setting up a Next.js boilerplate app - Configuring SuperTokens for frontend and backend - Implementing social login and email-password authentication - Styling the SuperTo...
Hacking with SuperTokens 004: Slots and slotting without the Shadow DOM!
Переглядів 222 місяці тому
🔗 Missed the last episode? Catch up here: ua-cam.com/video/FUlu33SZu94/v-deo.html Welcome to Episode 004 of Hacking with SuperTokens! Today, we're diving deep into advanced slotting functionality and custom children in our Web Components project. We'll explore how to enable slots in both React and raw HTML, building on the foundations we laid in previous episodes. In this episode, we cover: - E...
Hacking with SuperTokens 003: Integrating SolidJS-built Web Components with React Router
Переглядів 533 місяці тому
Check out the previous episode here: ua-cam.com/video/9GDUiwYmzpQ/v-deo.html Welcome to another episode of Hacking with SuperTokens! In today's episode, we'll continue our journey with web components by integrating them into a React project. We'll be using React Router for client-side navigation and demonstrating how web components can play nice in React-land too! In this video, we will: - Impo...
Hacking with SuperTokens 002: SuperTokens Auth with Web Components and SolidJS
Переглядів 1543 місяці тому
🔗 Missed the first episode? Check it out here: ua-cam.com/video/vWqDrtHvUdw/v-deo.html In today's session, we'll cover: - Creating an authentication screen and a dashboard screen - Utilizing SuperTokens documentation to set up our backend and frontend - Building custom web components for authentication - Compiling everything into a single JS file and testing it on static HTML pages 🔧 We'll walk...
Hacking with SuperTokens: Create Web Components Using SolidJS
Переглядів 2723 місяці тому
Welcome to the first episode of "Hacking with SuperTokens"! In this show, we dive into exciting web development hacks, exploring, learning, failing and succeeding along the way :) In this episode, we'll build some web components using SolidJS. We start with the basics, creating simple components, and then demonstrate how to integrate these components into both HTML and React projects. In this v...
Learn how to create an interactive technical documentation bot powered by ChatGPT
Переглядів 899Рік тому
0:00 Introduction 1:37 Requirements 2:30 Setup 4:20 What are Vector Embeddings? 4:45 How the Supertokens docs and discord messages are scraped and tokenized 7:35 Running the SuperTokens AI chatbot 8:22 What is the Agent Model? 8:34 How the SuperTokens Agent executor is set up
Everything you need to know about SuperTokens in 12 minutes
Переглядів 13 тис.Рік тому
SuperTokens is an Open-Source authentication and user management platform built as an alternative to Auth0, Firebase Auth and AWS Cognito. 0:00 Why do you need authentication 0:25 What is SuperTokens and getting started 2:07 End user experience 3:08 Session verification and refresh 4:45 Backend setup 7:25 Frontend setup 11:08 What are overrides?
How SuperTokens works (Session management - Part 3)
Переглядів 1,8 тис.Рік тому
We talk about the session management flow provided by SuperTokens - specifically about session creation and refreshing Part 2: ua-cam.com/video/dCM8s25eaQA/v-deo.html
How SuperTokens works (Sign in flow - Part 2)
Переглядів 2,8 тис.Рік тому
We talk about how the different parts of SuperTokens interact with each other during the sign in flow. Part 3: ua-cam.com/video/Ld3CYsXb6Fk/v-deo.html Part 1: ua-cam.com/video/lUjAx75hF8I/v-deo.html
How SuperTokens works (Architecture - Part 1)
Переглядів 6 тис.Рік тому
SuperTokens.com is an open source authentication solution. In this video, we talk about the frontend and backend SuperTokens SDKs and the SuperTokens core. Part 2: ua-cam.com/video/dCM8s25eaQA/v-deo.html
Passwordless by SuperTokens
Переглядів 1,3 тис.2 роки тому
Passwordless user authentication is a system that allows users to sign up and sign in to an app or website without entering a password. There are multiple ways to do it (like SMS, magic link, email, OTP) and with our powerful open source SDKs you can customise it the way you want and be done with it in less than an hour. Passwords are fading and users prefer signing up with just a few clicks. E...
How SuperTokens works (Part 3) - Session verification & auto-refreshing flow
Переглядів 8942 роки тому
See an improved version here: ua-cam.com/video/Ld3CYsXb6Fk/v-deo.html
How SuperTokens works (Part 2) - Sign In Flow
Переглядів 1,3 тис.2 роки тому
How SuperTokens works (Part 2) - Sign In Flow
How SuperTokens works (Part 1) - Architecture
Переглядів 3,8 тис.2 роки тому
How SuperTokens works (Part 1) - Architecture
Implement social and email password login using SuperTokens in ReactJS and NodeJS
Переглядів 8 тис.3 роки тому
Implement social and email password login using SuperTokens in ReactJS and NodeJS
Building email, password login and secure sessions for a ReactJS app using SuperTokens
Переглядів 8 тис.3 роки тому
Building email, password login and secure sessions for a ReactJS app using SuperTokens

КОМЕНТАРІ

  • @abdulrafay1951
    @abdulrafay1951 День тому

    the fk is this

  • @tobiasschmid1971
    @tobiasschmid1971 12 днів тому

    good job bro, well explained! Thanks for that :)

  • @PickleRiiiiiiick
    @PickleRiiiiiiick Місяць тому

    Stop saying “umm”

    • @Sairam-Kagitha
      @Sairam-Kagitha 23 дні тому

      Yeah, he spent half of time saying 🗣️"aauuummmmm"

  • @MaxForbang
    @MaxForbang Місяць тому

    Clean, easy, well-explained. Time to scale!

  • @paxeealex
    @paxeealex 2 місяці тому

    Thank you for this ✌

  • @aashishpaudel9178
    @aashishpaudel9178 2 місяці тому

    Using create-supertokens-app with Next.js app directory is generating code with pages directory instead. You might want to have a look at that bug. Otherwise, great video!

  • @soyKhronnos
    @soyKhronnos 2 місяці тому

    I'm trying to use the pasworless and social login but my app by requirement it's ssr so when trying to use supertokens-web-js I got an error because window it's not available, I'm using solidstart is there a way to use the supertokens-node instead? For passwordles it needs a TenantId but i understand that's for multitenant, any suggestion would be appreciated, great video by the way.

  • @supertokens7102
    @supertokens7102 2 місяці тому

    Thank you for watching! 🎉 If you have any questions or comments, please leave them below. Don't forget to check out our documentation at supertokens.io/docs.

  • @supertokens7102
    @supertokens7102 2 місяці тому

    Thanks for joining our SuperTokens Community AMA! If you have any more questions or topics you'd like us to cover, drop them in the comments below. Don't forget to check the description for timestamps and links to our social channels. Stay tuned for more exciting updates! 🚀 Join our discord to see the next one live -> supertokens.com/discord

  • @stephenasis7686
    @stephenasis7686 2 місяці тому

    Can we use Java for the backend

  • @76Freeman
    @76Freeman 2 місяці тому

    Really nice to see web-components with JSX, I never understood why we don't have more web-components. Can web-components be published to npm? I would love to see the full circle of a web-component. Thank you very much

  • @supertokens7102
    @supertokens7102 2 місяці тому

    Thanks for watching Episode 5 of "Hacking with SuperTokens"! 🌟 If you have any questions or need further clarification, drop them below. Don't forget to check out the previous episode if you missed it: ua-cam.com/video/-DZY4GB4_s4/v-deo.html. Your feedback helps us improve, so let us know what you think! 😊

  • @anushkasharma3736
    @anushkasharma3736 2 місяці тому

    can I use it with react native ?

    • @supertokens7102
      @supertokens7102 2 місяці тому

      Absolutely, with the caveat that you're gonna have to bring your own UI - supertokens.com/docs/thirdpartyemailpassword/custom-ui/init/frontend :)

  • @supertokens7102
    @supertokens7102 2 місяці тому

    Thank you for joining our live workshop on integrating SuperTokens with Next.js! 🎉 If you have any questions or suggestions, please leave them in the comments below. Don't forget to check out our documentation at [SuperTokens Documentation](supertokens.io/docs). We appreciate any feedback!

  • @supertokens7102
    @supertokens7102 2 місяці тому

    "Thanks for tuning in to Episode 004 of Hacking with SuperTokens! 🎉 If you found this video helpful, don't forget to like, share, and subscribe. Have questions or suggestions for future episodes? Drop them in the comments below!

  • @filipniklas
    @filipniklas 3 місяці тому

    Nice! Cool stuff! 👍

  • @rishabhpoddar7777
    @rishabhpoddar7777 3 місяці тому

    This is super cool!

  • @SonPham-wm1fv
    @SonPham-wm1fv 9 місяців тому

    I got this error when trying to import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom, } from "supertokens-auth-react"; do you know how to solve it? Module '"supertokens-auth-react"' has no exported member 'getSuperTokensRoutesForReactRouterDom'. Did you mean to use 'import getSuperTokensRoutesForReactRouterDom from "supertokens-auth-react"' instead?

  • @mattmccredy3530
    @mattmccredy3530 10 місяців тому

    please update this video :D

  • @James-mk8jp
    @James-mk8jp Рік тому

    We have to use react to use this? Bummer

    • @jeffstienstra3615
      @jeffstienstra3615 10 місяців тому

      nope. if you watched the video you'll see the CLI prompts you with several front end options -> 1:43

  • @rajsaroj4696
    @rajsaroj4696 Рік тому

    this is absolute garbage for frontend integration, bs documentation i'd rather stick to clerkjs

  • @edutelstream
    @edutelstream Рік тому

    Can you make a video on social media + Passwordless recipe as well?

  • @akshay.anilkmr
    @akshay.anilkmr Рік тому

    how did you add user

  • @danteschulz1701
    @danteschulz1701 Рік тому

    Hello, very good video, I resort to the comments section because I am implementing Supertokens in my reactJS and nodeJS project. What happens is that I'm having a problem when I want to use it but I don't know where I can ask for these things because the link to discord doesn't work on the page

  • @vudejavudeja
    @vudejavudeja Рік тому

    Thanks, this helps a lot! I Love the Clean and straight forward style 👍

  • @axi92
    @axi92 Рік тому

    Basically keycloak?

  • @Tripp111
    @Tripp111 Рік тому

    Blud. Great job. Lean and OP.

  • @italotoffolo
    @italotoffolo Рік тому

    Very cool!

  • @SheeceGardazi
    @SheeceGardazi Рік тому

    Thanks so much for the tetorial, can you please do one for Vue 3 using Nuxt framework?

  • @Saitama-ur3lq
    @Saitama-ur3lq Рік тому

    make a presentation for this please, it would take barely an hour to make a decent one

  • @skverskk
    @skverskk Рік тому

    How about email verification on sign up?

  • @ikedacripps
    @ikedacripps Рік тому

    You people have the worst documentation ever. Everything is just everywhere

  • @ShushantArora
    @ShushantArora Рік тому

    super fraudster, these guys take designs from freelance and contractors then do not pay them Please beaware of these fraudsters- Rishabh Poddar and Advait Ruia are scammers. Never use Supertokens in any of your product.

  • @ShushantArora
    @ShushantArora Рік тому

    super fraudster, these guys take designs from freelance and contractors then do not pay them Please beaware of these fraudsters- Rishabh Poddar and Advait Ruia are scammers. Never use Supertokens in any of your product.

  • @rajat5356
    @rajat5356 Рік тому

    super fraudster, these guys take designs from freelance and contractors then do not pay them Please beaware of these fraudsters- Rishabh Poddar and Advait Ruia are scammers. Never use Supertokens in any of your product.

  • @0soft
    @0soft Рік тому

    Can I use it with backend on Java Spring or Swift Vapor?

  • @DhananjayNaik
    @DhananjayNaik 2 роки тому

    Can you put up some benchmarks if you can, I am thinking of implementing this for a project.

  • @copperbadger
    @copperbadger 2 роки тому

    Note: in the latest version you need to import middleware() and errorHandler() from the framework-specific module. e.g.: import { middleware, errorHandler } from 'supertokens-node/framework/express'

  • @thomas-sinkala
    @thomas-sinkala 2 роки тому

    Any guide on integrating with Google chrome?

    • @rishabhpoddar7777
      @rishabhpoddar7777 2 роки тому

      Do you mean a chrome extension? If yes, we don't have a guide for it yet - but will come up with something in a few months.

    • @thomas-sinkala
      @thomas-sinkala 2 роки тому

      @@rishabhpoddar7777 Yes, I meant Chrome extension

  • @sreeharijayaraj2430
    @sreeharijayaraj2430 2 роки тому

    how can i access the user mail,profie,name etc in my backend after auth i couldnt find any info about that in your docs

    • @rishabhpoddar7777
      @rishabhpoddar7777 2 роки тому

      Hey! Depends on which recipe you are using. But each recipe has a post sign up "hook" using which you can get info about the user. Check out the "post login" section in the recipe docs.

  • @AbdulAlim-zg8vt
    @AbdulAlim-zg8vt 2 роки тому

    How do you setup post user registration action? I have a use-case where the user need admin approval after the registration.

  • @marzukzarir1454
    @marzukzarir1454 2 роки тому

    But how mobile frontend store access & refresh token cz there is no cookies in mbl frontend?

    • @rishabhpoddar1
      @rishabhpoddar1 2 роки тому

      Actually, all mobile devices and frameworks have support for cookies. We have SDKs for them which do all the token management on the frontend automatically.

  • @thanzex
    @thanzex 2 роки тому

    Wonderful project, but using a few diagrams and/or a presentation would have been far better than squiggling unreadable code during what feels like a 5-minutes improvised speech. What's more is that you already have those diagrams in your website

    • @1337KiLLeR1
      @1337KiLLeR1 2 роки тому

      Hey Thanzex, One of the project creators. You are absolutely correct, will work on improving this video. Thank you for the feedback!

  • @cantcode023
    @cantcode023 2 роки тому

    this looks really hard to implement unlike auth0.

  • @ojosh1h
    @ojosh1h 2 роки тому

    Fantastic tutorial! I gotta give supertokens a try

  • @Christopher-ew7jw
    @Christopher-ew7jw 3 роки тому

    Does email verification work with self-hosting?

  • @chiragkadam5948
    @chiragkadam5948 3 роки тому

    please provide code link for testing purpose...

  • @localhost0148
    @localhost0148 3 роки тому

    Super tokens is really cool, but everything in the video was way too fast