Learn how to build and authenticate a React application using Auth0 and RxJS. Front-end styled with the CSS framework, Tailwind.
Read on 
>> The Complete Guide to React User Authentication with Auth0
Brought to you by @kapehe 
Thanks for reading!
Is this your first time building with React + RxJS? Tell me how it went for you!
2 Likes
This is really impressive! I love how RxJS helps to model data flows. Your example is a perfect demonstration of it.
One nifty thing for your code, if you replace a flatMap with a switchMap, you’ll get a concurrent http calls cancellation 
BTW I totally understand why you injected observable values into a component state (there is no other way). To make it more seamless I’ve made, open-sourced and published a library called @reonomy/reactive-hooks
This library exposes a set of React hooks for RxJS such as useRxState() that helps to work with observables directly. For example:
const input$ = new BehaviorSubject("");
const user$ = input$.pipe(
debounceTime(3000),
filter(value => value.length > 3),
flatMap(...)
);
function Protected() {
const [input, setInput] = useRxState(user$);
const [user] = useRxState(user$);
return (
<div>
{user && (
<div className="mb-4">
<img src={user.avatar_url} alt="GitHub Avatar" width="200" className="shadow rounded mb-2" />
<h3 className="text-2xl text-blue-darker">{user.login}</h3>
</div>
)}
<input onChange={e => setInput(e.target.value)} placeholder="GitHub Username Here" className="py-3 px-4 rounded shadow w-64" />
<button onClick={() => Auth0.signOut()} className="mx-auto mt-5 p-2 text-xs block rounded bg-blue-lightest text-blue-darker hover:bg-blue-lightest">
Log Out
</button>
</div>
);
}
Happy to share more details 
Regards,
Dmitry
1 Like
That’s a great job @ddoronin!
Is the repo something you can share publicly? If so make sure to create another topic under Show Your Auth0 category. Thanks!
Yeah, the repo is public:
ohhh… you know what, it would be cool to make React hooks for Auth0 if it’s not done yet
1 Like