Build a React Application using RxJS

Blog Discussions
,
1

Learn how to build and authenticate a React application using Auth0 and RxJS. Front-end styled with the CSS framework, Tailwind.

Read on :atom_symbol:>> The Complete Guide to React User Authentication with Auth0

Brought to you by @kapehe :woman_technologist:t2:

1176×1056 146 KB

2

Thanks for reading!

Is this your first time building with React + RxJS? Tell me how it went for you!

2 Likes
5

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 :wink:
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 :slight_smile:
Regards,
Dmitry

1 Like
6

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!

7

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 :slight_smile:

1 Like
8

Thanks a lot for sharing that @ddoronin!