Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Chat app with React, Auth0, and Pusher Chatkit
Search
Zan Markan
December 04, 2018
Programming
0
370
Chat app with React, Auth0, and Pusher Chatkit
Used in a webinar at the Auth0 Online Meetup
Zan Markan
December 04, 2018
Tweet
Share
More Decks by Zan Markan
See All by Zan Markan
High-Performing Engineering Teams and the Holy Grail
zmarkan
0
81
A Practical Introduction to CI/CD
zmarkan
0
39
The Need for Speed - Practical Tips for Optimising your CI/CD Pipeline
zmarkan
0
72
State of Kotlin - Droidcon NYC
zmarkan
1
81
State of Kotlin - Droidcon Berlin 2018
zmarkan
1
150
Building DSLs in Kotlin for Fun and Profit
zmarkan
2
560
Push Notifications That Don't Suck
zmarkan
3
420
The State of Kotlin
zmarkan
0
190
10-ish Things about Android Library Development
zmarkan
0
110
Other Decks in Programming
See All in Programming
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
190
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
200
The State of Fluid (2025)
s2b
0
190
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
13
7.3k
Constant integer division faster than compiler-generated code
herumi
2
690
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
380
パスタの技術
yusukebe
1
400
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
260
バイブコーディング × 設計思考
nogu66
0
130
実践!App Intents対応
yuukiw00w
1
350
コーディングエージェント時代のNeovim
key60228
1
100
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
110
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Documentation Writing (for coders)
carmenintech
73
5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Fireside Chat
paigeccino
39
3.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Transcript
CHATKIT & AUTH0 Zan Markan - Pusher
[email protected]
// @zmarkan
Ado Kukic - Auth0
[email protected]
// @kukicado
DEMO 1. Visit: bit.ly/chatkit-auth0-demo 2. Login with Auth0 3. Say
hi! !"!"!"
Pusher Realtime APIs powering your… [ news, chat, ride sharing,
trading, sports, ___ ] …apps
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
CHATKIT • Every app is a chat app in 2018
• Instant messaging API that doesn’t make any assumptions • SDKs for web, iOS, and Android
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)
❤ 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
CHATKIT SITE / SIGNUP DEMO pusher.com/chatkit dash.pusher.com/chatkit docs.pusher.com/chatkit
CODE WALKTHROUGH • SPA in React • Chatkit authoriser in
Node/Express • Vanilla JS rules on Auth0
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
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)
QUESTION TIME!