Chat app with React, Auth0, and Pusher Chatkit

117c1e7c12a469a052f1361b6599af31?s=47 Zan Markan
December 04, 2018

Chat app with React, Auth0, and Pusher Chatkit

Used in a webinar at the Auth0 Online Meetup

117c1e7c12a469a052f1361b6599af31?s=128

Zan Markan

December 04, 2018
Tweet

Transcript

  1. CHATKIT & AUTH0 Zan Markan - Pusher
 zan@pusher.com // @zmarkan

    Ado Kukic - Auth0 ado@auth0.com // @kukicado
  2. DEMO 1. Visit: bit.ly/chatkit-auth0-demo 2. Login with Auth0 3. Say

    hi! !"!"!"
  3. Pusher Realtime APIs powering your… [ news, chat,
 ride sharing,

    trading, sports,
 ___ ] 
 …apps
  4. 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
  5. CHATKIT • Every app is a chat app in 2018

    • Instant messaging API that doesn’t make any assumptions • SDKs for web, iOS, and Android
  6. 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)
  7. ❤ 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
  8. CHATKIT SITE / SIGNUP DEMO pusher.com/chatkit dash.pusher.com/chatkit docs.pusher.com/chatkit

  9. CODE WALKTHROUGH • SPA in React • Chatkit authoriser in

    Node/Express • Vanilla JS rules on Auth0
  10. 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
  11. 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)
  12. QUESTION TIME!