Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Chat app with React, Auth0, and Pusher Chatkit

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
Avatar for Zan Markan Zan Markan
December 04, 2018

Chat app with React, Auth0, and Pusher Chatkit

Used in a webinar at the Auth0 Online Meetup

Avatar for Zan Markan

Zan Markan

December 04, 2018
Tweet

More Decks by Zan Markan

Other Decks in Programming

Transcript

  1. PUSHER pusher.com // @pusher Realtime API infrastructure since 2010 Pusher

    Channels started in 2010 - pub/sub over WebSocket 250k developers using our services Powering instant messaging use-cases for years Chatkit - dedicated product for building chat features
  2. CHATKIT • Every app is a chat app in 2018

    • Instant messaging API that doesn’t make any assumptions • SDKs for web, iOS, and Android
  3. CHATKIT FEATURES • 1:1 and Group Chat • Message History

    • Rich Media Sharing • User Presence • Typing Indicators • Read Receipts ✔✔ • Roles & Permissions • Public & Private rooms • GDPR compliant • Mobile Push (beta) • WebHooks (soon)
  4. ❤ AUTH0 FOR USER MGMT Chatkit doesn’t oźfer user authentication,

    just permissions Auth0 is preżty good at the whole users part… Post-login rules - Create users - Add user to default room
  5. CODE WALKTHROUGH • SPA in React • Chatkit authoriser in

    Node/Express • Vanilla JS rules on Auth0
  6. DIY CHAT APP How to deploy your own chat app

    in 7.5 minutes (or 12 steps) All steps described in the readme:
 github.com/zmarkan/chatkit-sample-client
  7. MORE RESOURCES • Demo repository: github.com/zmarkan/chatkit-sample-client • Chatkit Docs: docs.pusher.com/chatkit

    • Auth0 Docs: hżtps://auth0.com/docs • Pusher Tutorials: pusher.com/tutorials?q=chatkit • Pusher Community slack: hżtps://feedback-beta.pusher.com/ • Chat UIs: • github.com/brandonmowat/react-chat-ui (React) • github.com/FaridSafi/react-native-giźted-chat (React Native)