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
decksh - a little language for decks
ajstarks
4
21k
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
200
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
8.9k
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
100
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
300
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
490
ゲームの物理
fadis
5
1.5k
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
12
6.4k
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
170
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
12
2.8k
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Facilitating Awesome Meetings
lara
55
6.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Language of Interfaces
destraynor
160
25k
Making Projects Easy
brettharned
117
6.3k
How STYLIGHT went responsive
nonsquared
100
5.7k
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!