Add a sign up and log in with Outseta

[olavea]

What:

Add ⚓ Log in ⚓ 🃏 Sign up 🃏
to // src / pages / index.js

Why:

Stop Lizabeth's enemies from stealing Ruby's TimeShip. (See all the way at the bottom) This is how it should look. (show webapp)

How:

Plan A. Add ⚓ Anchors and a head script B. Body setHead on body

C. Config D. Domain

E. Error F. Finish

G. Get it on Github and Gatsby cloud https://timeship1.gatsbyjs.io/

Let's start coding.

A. Add ⚓ Anchors and a head script

// src / pages / index.js
      <section>
        <a href="https://queen.outseta.com/auth?widgetMode=login#o-anonymous">
        ⚓ Log in ⚓
        </a>
        <a href="https://queen.outseta.com/auth?widgetMode=register#o-anonymous">
          🃏 Sign up 🃏
        </a>
      </section>

B. Body setHead on body

// gatsby-ssr.js
import React from "react";

const OusetaScriptComponent = () => {
  return (
    <script
      key="outseta-script"
      id="outseta-script"
      src="https://cdn.outseta.com/outseta.min.js"
//      data-options="o_options"
    />
  );
};

// B. Body setHead on body

const onRenderBody = ({ setHeadComponents }) => {
return setHeadComponents([/*OusetaConfigComponent(),*/ OusetaScriptComponent()]);
};

export { onRenderBody };

C. Config

// gatsby-ssr.js

const OusetaConfigComponent = () => {
  const config = {
    domain: "queen.outseta.com",
    monitorDom: true,
  };
  return (
    <script
      key="outseta-config"
      id="outseta-config"
      dangerouslySetInnerHTML={{
        __html: `var o_options = ${JSON.stringify(config, null, 2)}`,
      }}
    />
  );
};

D. Domain Delete these comments.

// gatsby-ssr.js
//      data-options="o_options"
/*OusetaConfigComponent(),*/

E. Error is gone F. Finished

G. Get it on Github and Gatsby cloud https://timeship1.gatsbyjs.io/

Docs: https://timeship.outseta.com/#/app/auth/embeds/quickstart

Mary 1 (Her Murderous Majesty of Britannia)

Simona "Red Fox" Renard (Queen Mary's Inquisitor)

and

Captain Kitten (Famous baker apprentice)

[olavea]

😸

[olavea]

typo in docs:

Default integration

2. paragraph: last sentence " The Outseta script in included in the head on load. "

change to: .... script is ....

[olavea]

https://go.outseta.com/support/kb/articles/A93nZlQ0/how-to-integrate-outseta-with-react

https://codesandbox.io/s/react-outseta-demo-forked-4kjr4v?file=/src/ProtectedRoute.js:27-39

https://github.com/olavea/Rubys-TimeShip/blob/792553880fdc92202615e989e70efa08d11ae715/gatsby-ssr.js