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
360
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
78
A Practical Introduction to CI/CD
zmarkan
0
37
The Need for Speed - Practical Tips for Optimising your CI/CD Pipeline
zmarkan
0
70
State of Kotlin - Droidcon NYC
zmarkan
1
79
State of Kotlin - Droidcon Berlin 2018
zmarkan
1
150
Building DSLs in Kotlin for Fun and Profit
zmarkan
2
550
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
生成AI時代のコンポーネントライブラリの作り方
touyou
1
280
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
9
300
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
430
TypeScriptでDXを上げろ! Hono編
yusukebe
3
760
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
880
テスト駆動Kaggle
isax1015
1
610
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
GPUを計算資源として使おう!
primenumber
1
230
Featured
See All Featured
Done Done
chrislema
184
16k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
It's Worth the Effort
3n
185
28k
Code Reviewing Like a Champion
maltzj
524
40k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
GraphQLとの向き合い方2022年版
quramy
49
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
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!