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
340
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
74
A Practical Introduction to CI/CD
zmarkan
0
34
The Need for Speed - Practical Tips for Optimising your CI/CD Pipeline
zmarkan
0
60
State of Kotlin - Droidcon NYC
zmarkan
1
67
State of Kotlin - Droidcon Berlin 2018
zmarkan
1
140
Building DSLs in Kotlin for Fun and Profit
zmarkan
2
540
Push Notifications That Don't Suck
zmarkan
3
410
The State of Kotlin
zmarkan
0
180
10-ish Things about Android Library Development
zmarkan
0
100
Other Decks in Programming
See All in Programming
マルチアカウント環境での、そこまでがんばらない RI/SP 運用設計
wa6sn
0
680
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
410
データベースエンジニアの仕事を楽にする。PgAssistantの紹介
nnaka2992
9
4.4k
「影響が少ない」を自分の目でみてみる
o0h
PRO
1
140
英語 × の私が、生成AIの力を借りて、OSSに初コントリビュートした話
personabb
0
160
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
780
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.3k
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
180
Vibe Codingをせずに Clineを使っている
watany
15
5k
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
120
PHPによる"非"構造化プログラミング入門 -本当に熱いスパゲティコードを求めて- #phperkaigi
o0h
PRO
0
1.2k
PsySHから紐解くREPLの仕組み
muno92
PRO
1
540
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
500
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Done Done
chrislema
183
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
510
RailsConf 2023
tenderlove
29
1k
Thoughts on Productivity
jonyablonski
69
4.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
102
19k
Practical Orchestrator
shlominoach
186
10k
Six Lessons from altMBA
skipperchong
27
3.7k
Fireside Chat
paigeccino
37
3.4k
Transcript
CHATKIT & AUTH0 Zan Markan - Pusher zan@pusher.com // @zmarkan
Ado Kukic - Auth0 ado@auth0.com // @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!