bs-auth0-session

![npm](https://www.npmjs.com/package/bs-auth0-session)

Source: https://github.com/mscharley/bs-auth0-session
Author: Matthew Scharley
Contributors: [See contributors on GitHub][gh-contrib]
Bugs/Support: [Github Issues][gh-issues]
Copyright: 2018
License: [MIT license][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.

``reason / 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}}) => domain="my-domain.au.auth0.com" clientId="dJ9HRAcoottSxYnYourClientIdHere" callbackUrl={Util.locationOrigin ++ "/oauth/callback"}> ...{ pending => switch (page, pending) { | (Some(Logout), _) => / !! Provided !! / | (Some(Callback), _) => / !! Provided !! / | (_, true) => | (_, false) => onClick={ _ev => session->Session.doLogin(~returnUrl, ()) }> {ReasonReact.string("Login")} } } ...{ _session => switch (page) { | Some(Logout) => / !! Provided !! / | Some(Home) => | Some(Callback) => React.null | Some(Login) => React.Router.push("/"); React.null; | None => } } , } }`

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`][sc-rei] for more details on the available consumers.

[gh-contrib]: https://github.com/mscharley/bs-auth0-session/graphs/contributors
[gh-issues]: https://github.com/mscharley/bs-auth0-session/issues
[license]: https://github.com/mscharley/bs-auth0-session/blob/master/LICENSE
[sc-rei]: https://github.com/mscharley/bs-auth0-session/blob/master/src/SessionContext.rei

Usage

This is a rather long example, but it should be complete and functional.

reason
/ 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}}) =>
              domain="my-domain.au.auth0.com"
        clientId="dJ9HRAcoottSxYnYourClientIdHere"
        callbackUrl={Util.locationOrigin ++ "/oauth/callback"}>
          
            ...{
                pending =>
                  switch (page, pending) {
                  | (Some(Logout), _) =>
                     / !! Provided !! /
                  | (Some(Callback), _) =>
                     / !! Provided !! /
                  | (_, true) => 
                  | (_, false) =>
                                          onClick={
                        _ev => session->Session.doLogin(~returnUrl, ())
                      }>
                      {ReasonReact.string("Login")}
                    
                  }
              }
          
          
            ...{
                _session =>
                  switch (page) {
                  | Some(Logout) =>  / !! Provided !! /
                  | Some(Home) => 
                  | Some(Callback) => React.null
                  | Some(Login) =>
                    React.Router.push("/");
                    React.null;
                  | None => 
                  }
              }
          
      ,
  }
}

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`][sc-rei] for more details on the available consumers.