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
320
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
72
A Practical Introduction to CI/CD
zmarkan
0
31
The Need for Speed - Practical Tips for Optimising your CI/CD Pipeline
zmarkan
0
57
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
530
Push Notifications That Don't Suck
zmarkan
3
390
The State of Kotlin
zmarkan
0
180
10-ish Things about Android Library Development
zmarkan
0
99
Other Decks in Programming
See All in Programming
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
Software Architecture
hschwentner
6
2.1k
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Building Adaptive Systems
keathley
40
2.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
GitHub's CSS Performance
jonrohan
1030
460k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
KATA
mclloyd
29
14k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Gamification - CAS2011
davidbonilla
80
5.1k
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!