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
77
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
78
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
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
1
110
Claude Codeの使い方
ttnyt8701
1
130
ReadMoreTextView
fornewid
1
450
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
1
260
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
290
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
740
SODA - FACT BOOK
sodainc
1
1.1k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
130
Datadog RUM 本番導入までの道
shinter61
1
310
GraphRAGの仕組みまるわかり
tosuri13
7
450
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
greenflagproject
1
120
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
520
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
4
200
Agile that works and the tools we love
rasmusluckow
329
21k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
It's Worth the Effort
3n
184
28k
Building Adaptive Systems
keathley
43
2.6k
Site-Speed That Sticks
csswizardry
10
650
Statistics for Hackers
jakevdp
799
220k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Designing for Performance
lara
609
69k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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!