bs-auth0-session
Source: https://github.com/mscharley/bs-auth0-session
Author: Matthew Scharley
Contributors: See contributors on GitHub
Bugs/Support: Github Issues
Copyright: 2018
License: MIT license
Status: Active
Synopsis
Session management for ReasonReact using Auth0 for login.
Usage
This is a rather long example, but it should be complete and functional.
/* Util.re */[@bs.val] [@bs.scope ("window", "location")]external locationOrigin: string = "origin"; let urlToString = url => ( switch (url.React.Router.path) { | [] => "/" | _ => url.React.Router.path->Belt.List.reduce("", (a, b) => a ++ "/" ++ b) } ) ++ (url.search != "" ? "?" ++ url.search : "") ++ (url.hash != "" ? "#" ++ url.hash : ""); /* Router.re */open BsAuth0Session; type page = | Home | Callback | Logout | Login; type state = { page: option(page), returnUrl: string,}; type action = | Navigate(option(page)); let routerFn: ReasonReact.Router.url => option(page) = fun | {path: []} => Some(Home) | {path: ["oauth", "callback"]} => Some(Callback) | {path: ["logout"]} => Some(Logout) | {path: ["login"]} => Some(Login) | _ => None; let component = ReasonReact.reducerComponent("Router"); let make = _children => { let router = (url, {ReasonReact.send}) => url->routerFn->Navigate; { ...component, initialState: _ => { let initialUrl = ReasonReact.Router.dangerouslyGetInitialUrl(); { page: initialUrl->routerFn, returnUrl: initialUrl->Util.urlToString, } }, didMount: self => { let watcherId = ReasonReact.Router.watchUrl(self.handle(router)); self.onUnmount(_ => ReasonReact.Router.unwatchUrl(watcherId)); }, reducer: (action, state) => switch (action) { | Navigate(page) => Update({...state, page}) }, render: ({state: {page, returnUrl}}) => <SessionContext.Provider domain="my-domain.au.auth0.com" clientId="dJ9HRAcoottSxYnYourClientIdHere" callbackUrl={Util.locationOrigin ++ "/oauth/callback"}> <SessionContext.LoggedOutConsumer> ...{ pending => switch (page, pending) { | (Some(Logout), _) => <LogoutPage returnUrl={Util.locationOrigin ++ "/"} /> /* !! Provided !! */ | (Some(Callback), _) => <CallbackPage /> /* !! Provided !! */ | (_, true) => <LoadingPage /> | (_, false) => <Button onClick={ _ev => session->Session.doLogin(~returnUrl, ()) }> {ReasonReact.string("Login")} </Button> } } </SessionContext.LoggedOutConsumer> <SessionContext.LoggedInConsumer> ...{ _session => switch (page) { | Some(Logout) => <LogoutPage returnUrl={Util.locationOrigin ++ "/"} /> /* !! Provided !! */ | Some(Home) => <HomePage /> | Some(Callback) => React.null | Some(Login) => React.Router.push("/"); React.null; | None => <NotFoundPage /> } } </SessionContext.LoggedInConsumer> </SessionContext.Provider>, }}
There's a whole suite of Consumers for all sorts of use-cases. There is also SessionContext.Consumer
which is your escape hatch which exposes the raw session data that this library tracks.
Check SessionContext.rei
for more details on the available consumers.