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
300
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
71
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
65
State of Kotlin - Droidcon Berlin 2018
zmarkan
1
140
Building DSLs in Kotlin for Fun and Profit
zmarkan
2
500
Push Notifications That Don't Suck
zmarkan
3
380
The State of Kotlin
zmarkan
0
180
10-ish Things about Android Library Development
zmarkan
0
98
Other Decks in Programming
See All in Programming
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
flutterkaigi_2024.pdf
kyoheig3
0
140
CSC509 Lecture 13
javiergs
PRO
0
110
Remix on Hono on Cloudflare Workers
yusukebe
1
290
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
330
CSC509 Lecture 09
javiergs
PRO
0
140
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
140
みんなでプロポーザルを書いてみた
yuriko1211
0
260
距離関数を極める! / SESSIONS 2024
gam0022
0
280
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
190
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
690
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
Bash Introduction
62gerente
608
210k
Scaling GitHub
holman
458
140k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Designing for Performance
lara
604
68k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Building Applications with DynamoDB
mza
90
6.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Thoughts on Productivity
jonyablonski
67
4.3k
Making Projects Easy
brettharned
115
5.9k
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!