Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Recipe to Power Up Gatsby with Auth

A Recipe to Power Up Gatsby with Auth

Gatsby rose to fame as a static site generator, but it’s also an amazing platform for building dynamic sites! Wouldn’t it be awesome if we could add a user profile with access to protected data in our Gatsby app? Like Mario’s fire flower or Link’s hook shot, adding auth will power up your dynamic Gatsby site. Just one question: is it any different than adding auth to a regular React app?

In this talk, you’ll learn about Gatsby’s build process and runtime and how they impact setting up auth. You’ll also learn how to use Hooks and Context to build your auth sidekick. Finally, you’ll learn how Gatsby recipes can speed up this implementation and make it easy to replicate in all of your projects. By the end, you’ll be ready for the next level of your Gatsby quest!

Sam Julien

July 01, 2020
Tweet

More Decks by Sam Julien

Other Decks in Technology

Transcript

  1. View Slide

  2. A Receipe to Power Up Gatsby

    View Slide

  3. A Receipe to Power Up Gatsby
    with Auth!

    View Slide

  4. @samjulien

    View Slide

  5. Static Site Generator
    @samjulien

    View Slide

  6. Dynamic Site Framework
    @samjulien

    View Slide

  7. Blazing Fast Web & App Framework
    @samjulien

    View Slide

  8. @samjulien

    View Slide

  9. @samjulien

    +

    View Slide

  10. @samjulien

    +

    View Slide

  11. @samjulien

    View Slide

  12. @samjulien

    View Slide

  13. Gatsby Recipes #
    @samjulien

    View Slide

  14. Adding Auth to Gatsby
    @samjulien

    View Slide

  15. Adding Auth to Gatsby
    @samjulien
    Build Time vs. Runtime

    View Slide

  16. Adding Auth to Gatsby
    @samjulien
    Build Time vs. Runtime
    Using Hooks for Auth

    View Slide

  17. Adding Auth to Gatsby
    @samjulien
    Build Time vs. Runtime
    Using Hooks for Auth
    An Auth Recipe for Gatsby %

    View Slide

  18. @samjulien
    Sam Julien
    samjulien.com

    View Slide

  19. @samjulien
    Sam Julien
    samjulien.com
    Sr. Developer Advocate Engineer at Auth0

    View Slide

  20. @samjulien
    Sam Julien
    samjulien.com
    Sr. Developer Advocate Engineer at Auth0
    Google Developer Expert

    View Slide

  21. @samjulien
    Sam Julien
    samjulien.com
    Sr. Developer Advocate Engineer at Auth0
    Google Developer Expert
    Instructor for Thinkster & egghead

    View Slide

  22. Adding Auth to Gatsby
    @samjulien
    Build Time vs. Runtime
    Using Hooks for Auth
    An Auth Recipe for Gatsby %

    View Slide

  23. @samjulien

    View Slide

  24. Build Time Runtime
    @samjulien

    View Slide

  25. Build Time
    Runtime
    @samjulien

    View Slide

  26. Build Time
    Runtime

    @samjulien

    View Slide

  27. Build Time
    Runtime


    @samjulien

    View Slide

  28. No browser APIs available!
    @samjulien

    View Slide

  29. Build Time
    Runtime

    @samjulien

    View Slide

  30. Build Time Runtime
    @samjulien

    View Slide

  31. Build Time
    Runtime
    @samjulien

    View Slide

  32. Build Time
    Runtime

    @samjulien

    View Slide

  33. Build Time
    Runtime


    @samjulien

    View Slide

  34. Build Time Runtime
    @samjulien

    View Slide

  35. Build Time Runtime
    @samjulien

    View Slide

  36. @samjulien

    +

    View Slide

  37. @samjulien

    +

    View Slide

  38. @samjulien

    View Slide

  39. Start login
    Handle redirect
    Log in to provider
    @samjulien

    View Slide

  40. Handle redirect
    Success
    Error
    @samjulien

    View Slide

  41. Success
    User Token
    @samjulien

    View Slide

  42. Success
    User Token
    Redirect
    @samjulien

    View Slide

  43. Adding Auth to Gatsby
    @samjulien
    Build Time vs. Runtime
    Using Hooks for Auth
    An Auth Recipe for Gatsby %

    View Slide

  44. @samjulien

    View Slide

  45. Auth Utility
    @samjulien

    View Slide

  46. @samjulien
    Auth Utility

    View Slide

  47. @samjulien
    Store token and user in memory
    Auth Utility

    View Slide

  48. @samjulien
    Store token and user in memory
    Interact with auth SDK
    Auth Utility

    View Slide

  49. @samjulien
    Store token and user in memory
    Interact with auth SDK
    Handle all redirect logic
    Auth Utility

    View Slide

  50. @samjulien
    export const AuthContext = React.createContext(defaultContext);
    export const useAuth = () => useContext(AuthContext);

    View Slide

  51. @samjulien
    export const AuthContext = React.createContext(defaultContext);
    export const useAuth = () => useContext(AuthContext);

    View Slide

  52. @samjulien
    export const AuthContext = React.createContext(defaultContext);
    export const useAuth = () => useContext(AuthContext);

    View Slide

  53. @samjulien
    export const AuthContext = React.createContext(defaultContext);
    export const useAuth = () => useContext(AuthContext);

    View Slide

  54. @samjulien
    export const AuthContext = React.createContext(defaultContext);
    export const useAuth = () => useContext(AuthContext);

    View Slide

  55. @samjulien
    export const AuthProvider = ({
    children,
    ...initOptions
    }) => {...};

    View Slide

  56. @samjulien
    export const AuthProvider = ({
    children,
    ...initOptions
    }) => { };

    View Slide

  57. @samjulien
    export const AuthProvider = ({
    children,
    ...initOptions
    }) => { ...};

    View Slide

  58. @samjulien
    ...

    View Slide

  59. @samjulien
    const [authClient, setAuthClient] = useState();
    const [isAuthenticated, setIsAuthenticated] = useState();
    const [token, setToken] = useState();
    const [user, setUser] = useState();
    const [loading, setLoading] = useState(true);

    View Slide

  60. @samjulien
    const [authClient, setAuthClient] = useState();
    const [isAuthenticated, setIsAuthenticated] = useState();
    const [token, setToken] = useState();
    const [user, setUser] = useState();
    const [loading, setLoading] = useState(true);

    View Slide

  61. @samjulien
    const [authClient, setAuthClient] = useState();
    const [isAuthenticated, setIsAuthenticated] = useState();
    const [token, setToken] = useState();
    const [user, setUser] = useState();
    const [loading, setLoading] = useState(true);

    View Slide

  62. @samjulien
    const [authClient, setAuthClient] = useState();
    const [isAuthenticated, setIsAuthenticated] = useState();
    const [token, setToken] = useState();
    const [user, setUser] = useState();
    const [loading, setLoading] = useState(true);

    View Slide

  63. @samjulien
    const [authClient, setAuthClient] = useState();
    const [isAuthenticated, setIsAuthenticated] = useState();
    const [token, setToken] = useState();
    const [user, setUser] = useState();
    const [loading, setLoading] = useState(true);

    View Slide

  64. @samjulien
    useEffect(() => {
    const initAuth = async () => {
    // initialize the auth client
    const authFromHook = await createAuthClient(initOptions);
    setAuth(authFromHook);
    // check if we're in the middle of a redirect
    if (
    window.location.search.includes("code=") &&
    window.location.search.includes("state=")
    ) {
    const { appState } = await authFromHook.handleRedirectCallback();
    onRedirectCallback(appState);
    }

    View Slide

  65. @samjulien
    useEffect(() => {
    const initAuth = async () => {
    // initialize the auth client
    const authFromHook = await createAuthClient(initOptions);
    setAuth(authFromHook);
    // check if we're in the middle of a redirect
    if (
    window.location.search.includes("code=") &&
    window.location.search.includes("state=")
    ) {
    const { appState } = await authFromHook.handleRedirectCallback();
    onRedirectCallback(appState);
    }

    View Slide

  66. @samjulien
    useEffect(() => {
    const initAuth = async () => {
    // initialize the auth client
    const authFromHook = await createAuthClient(initOptions);
    setAuth(authFromHook);
    // check if we're in the middle of a redirect
    if (
    window.location.search.includes("code=") &&
    window.location.search.includes("state=")
    ) {
    const { appState } = await authFromHook.handleRedirectCallback();
    onRedirectCallback(appState);
    }

    View Slide

  67. @samjulien
    useEffect(() => {
    const initAuth = async () => {
    // initialize the auth client
    const authFromHook = await createAuthClient(initOptions);
    setAuth(authFromHook);
    // check if we're in the middle of a redirect
    if (
    window.location.search.includes("code=") &&
    window.location.search.includes("state=")
    ) {
    const { appState } = await authFromHook.handleRedirectCallback();
    onRedirectCallback(appState);
    }

    View Slide

  68. @samjulien
    // set initial state using hooks
    const isAuthenticated = await authFromHook.isAuthenticated();
    setIsAuthenticated(isAuthenticated);
    if (isAuthenticated) {
    const user = await authFromHook.getUser();
    setUser(user);
    }
    setLoading(false);
    };
    initAuth();
    }, []);

    View Slide

  69. @samjulien
    // set initial state using hooks
    const isAuthenticated = await authFromHook.isAuthenticated();
    setIsAuthenticated(isAuthenticated);
    if (isAuthenticated) {
    const user = await authFromHook.getUser();
    setUser(user);
    }
    setLoading(false);
    };
    initAuth();
    }, []);

    View Slide

  70. @samjulien
    // set initial state using hooks
    const isAuthenticated = await authFromHook.isAuthenticated();
    setIsAuthenticated(isAuthenticated);
    if (isAuthenticated) {
    const user = await authFromHook.getUser();
    setUser(user);
    }
    setLoading(false);
    };
    initAuth();
    }, []);

    View Slide

  71. @samjulien
    // set initial state using hooks
    const isAuthenticated = await authFromHook.isAuthenticated();
    setIsAuthenticated(isAuthenticated);
    if (isAuthenticated) {
    const user = await authFromHook.getUser();
    setUser(user);
    }
    setLoading(false);
    };
    initAuth();
    }, []);

    View Slide

  72. @samjulien
    // set initial state using hooks
    const isAuthenticated = await authFromHook.isAuthenticated();
    setIsAuthenticated(isAuthenticated);
    if (isAuthenticated) {
    const user = await authFromHook.getUser();
    setUser(user);
    }
    setLoading(false);
    };
    initAuth();
    }, []);

    View Slide

  73. @samjulien
    // set initial state using hooks
    const isAuthenticated = await authFromHook.isAuthenticated();
    setIsAuthenticated(isAuthenticated);
    if (isAuthenticated) {
    const user = await authFromHook.getUser();
    setUser(user);
    }
    setLoading(false);
    };
    initAuth();
    }, []);

    View Slide

  74. @samjulien
    const handleRedirectCallback = async () => {
    // handle callback
    // use hooks to set state
    };

    View Slide

  75. @samjulien
    return (
    value={{
    isAuthenticated,
    user,
    token,
    loading,
    handleRedirectCallback,
    getToken: (...p) => authClient.getTokenSilently(...p),
    logout: (...p) => authClient.logout(...p),
    }}
    >
    {children}

    );

    View Slide

  76. @samjulien
    return (
    value={{
    isAuthenticated,
    user,
    token,
    loading,
    handleRedirectCallback,
    getToken: (...p) => authClient.getTokenSilently(...p),
    logout: (...p) => authClient.logout(...p),
    }}
    >
    {children}

    );

    View Slide

  77. @samjulien
    return (
    value={{
    isAuthenticated,
    user,
    token,
    loading,
    handleRedirectCallback,
    getToken: (...p) => authClient.getTokenSilently(...p),
    logout: (...p) => authClient.logout(...p),
    }}
    >
    {children}

    );

    View Slide

  78. @samjulien
    return (
    value={{
    isAuthenticated,
    user,
    token,
    loading,
    handleRedirectCallback,
    getToken: (...p) => authClient.getTokenSilently(...p),
    logout: (...p) => authClient.logout(...p),
    }}
    >
    {children}

    );

    View Slide

  79. @samjulien
    return (
    value={{
    isAuthenticated,
    user,
    token,
    loading,
    handleRedirectCallback,
    getToken: (...p) => authClient.getTokenSilently(...p),
    logout: (...p) => authClient.logout(...p),
    }}
    >
    {children}

    );

    View Slide

  80. @samjulien
    return (
    value={{
    isAuthenticated,
    user,
    token,
    loading,
    handleRedirectCallback,
    getToken: (...p) => authClient.getTokenSilently(...p),
    logout: (...p) => authClient.logout(...p),
    }}
    >
    {children}

    );

    View Slide

  81. Auth Utility
    @samjulien

    View Slide

  82. @samjulien
    Auth Utility

    View Slide

  83. @samjulien
    Store token and user in memory
    Interact with auth SDK
    Handle all redirect logic
    Auth Utility

    View Slide

  84. Does our Gatsby app work?
    @samjulien

    View Slide

  85. Maybe (but probably not).
    @samjulien

    View Slide

  86. gatsby develop vs gatsby build
    @samjulien

    View Slide

  87. View Slide

  88. View Slide

  89. Build Time Runtime
    @samjulien

    View Slide

  90. Build Time
    Runtime
    @samjulien

    View Slide

  91. Build Time
    Runtime

    @samjulien

    View Slide

  92. Build Time
    Runtime


    @samjulien

    View Slide

  93. Build Time Runtime
    @samjulien

    View Slide

  94. @samjulien
    export const AuthContext = React.createContext(defaultContext);
    export const useAuth = () => useContext(AuthContext);

    View Slide

  95. @samjulien
    export const AuthContext = React.createContext(defaultContext);
    export const useAuth = () => useContext(AuthContext);

    View Slide

  96. @samjulien
    const defaultContext = {
    isAuthenticated: false,
    user: null,
    token: null,
    loading: false,
    login: () => {},
    };

    View Slide

  97. Why do we do this?
    @samjulien

    View Slide

  98. Example: NavBar Component
    @samjulien

    View Slide

  99. @samjulien
    const NavBar = () => {
    const { isAuthenticated, login, logout } = useAuth();
    return (

    Home{" "}
    {!isAuthenticated && login()}>Log in}
    {isAuthenticated && (
    <>
    Profile
    logout()}>Log out
    >
    )}

    );
    };

    View Slide

  100. @samjulien
    const NavBar = () => {
    const { isAuthenticated, login, logout } = useAuth();
    return (

    Home{" "}
    {!isAuthenticated && login()}>Log in}
    {isAuthenticated && (
    <>
    Profile
    logout()}>Log out
    >
    )}

    );
    };

    View Slide

  101. @samjulien
    const NavBar = () => {
    const { isAuthenticated, login, logout } = useAuth();
    return (

    Home{" "}
    {!isAuthenticated && login()}>Log in}
    {isAuthenticated && (
    <>
    Profile
    logout()}>Log out
    >
    )}

    );
    };

    View Slide

  102. @samjulien
    const NavBar = () => {
    const { isAuthenticated, login, logout } = useAuth();
    return (

    Home{" "}
    {!isAuthenticated && login()}>Log in}
    {isAuthenticated && (
    <>
    Profile
    logout()}>Log out
    >
    )}

    );
    };

    View Slide

  103. @samjulien
    const NavBar = () => {
    const { isAuthenticated, login, logout } = useAuth();
    return (

    Home{" "}
    {!isAuthenticated && login()}>Log in}
    {isAuthenticated && (
    <>
    Profile
    logout()}>Log out
    >
    )}

    );
    };

    View Slide

  104. What if we use this in a Gatsby page?
    @samjulien

    View Slide

  105. @samjulien
    export default () => {
    const { loading } = useAuth();
    if (loading) {
    return Loading...;
    }
    return (




    );
    };

    View Slide

  106. @samjulien
    export default () => {
    const { loading } = useAuth();
    if (loading) {
    return Loading...;
    }
    return (




    );
    };

    View Slide

  107. @samjulien
    export default () => {
    const { loading } = useAuth();
    if (loading) {
    return Loading...;
    }
    return (




    );
    };

    View Slide

  108. @samjulien


    View Slide

  109. @samjulien


    View Slide

  110. @samjulien


    View Slide

  111. @samjulien

    View Slide

  112. @samjulien
    const defaultContext = {
    isAuthenticated: false,
    user: null,
    token: null,
    loading: false,
    login: () => {},
    };

    View Slide

  113. @samjulien

    View Slide

  114. @samjulien

    View Slide

  115. @samjulien

    View Slide

  116. @samjulien


    View Slide


  117. @samjulien

    View Slide

  118. Where do we use this AuthProvider?
    @samjulien

    View Slide

  119. Adding Auth to Gatsby
    @samjulien
    Build Time vs. Runtime
    Using Hooks for Auth
    An Auth Recipe for Gatsby %

    View Slide

  120. Gatsby Recipes #
    @samjulien

    View Slide

  121. Gatsby Recipes #
    @samjulien

    View Slide

  122. Automate common tasks
    Gatsby Recipes #
    @samjulien

    View Slide

  123. Automate common tasks
    Gatsby Recipes #
    Written in MDX
    @samjulien

    View Slide

  124. Automate common tasks
    Gatsby Recipes #
    Install packages and plugins
    Written in MDX
    @samjulien

    View Slide

  125. Automate common tasks
    Gatsby Recipes #
    Install packages and plugins
    Generate pages and code
    Written in MDX
    @samjulien

    View Slide

  126. Automate common tasks
    Run from the CLI
    Gatsby Recipes #
    Install packages and plugins
    Generate pages and code
    Written in MDX
    @samjulien

    View Slide

  127. Written in MDX
    @samjulien

    View Slide

  128. Step 0: Create a local MDX file or a Gist.
    @samjulien

    View Slide

  129. Install packages and plugins
    @samjulien

    View Slide

  130. Step 1: Install Auth SDK
    @samjulien

    View Slide

  131. Step 1: Install Auth SDK

    @samjulien

    View Slide

  132. Generate pages and code
    @samjulien

    View Slide

  133. Step 2: Add Auth Provider
    @samjulien

    View Slide

  134. Step 2: Add Auth Provider
    content="./auth-recipe/auth.js" />
    @samjulien

    View Slide

  135. Step 2: Add Auth Provider
    content="./auth-recipe/auth.js" />
    @samjulien

    View Slide

  136. Step 2: Add Auth Provider
    content="./auth-recipe/auth.js" />
    @samjulien

    View Slide

  137. Where do we use this AuthProvider?
    @samjulien

    View Slide

  138. Step 3: Add gatsby-browser.js
    @samjulien

    View Slide

  139. gatsby-browser.js
    @samjulien

    View Slide

  140. export const wrapRootElement = ({ element }) => {
    return (
    // pass in any configuration here
    >
    {element}

    );
    };
    @samjulien

    View Slide

  141. export const wrapRootElement = ({ element }) => {
    return (
    // pass in any configuration here
    >
    {element}

    );
    };
    @samjulien

    View Slide

  142. export const wrapRootElement = ({ element }) => {
    return (
    // pass in any configuration here
    >
    {element}

    );
    };
    @samjulien

    View Slide

  143. Step 3: Add gatsby-browser.js
    @samjulien

    View Slide

  144. path="./gatsby-browser.js"
    content="./auth-recipe/gatsby-
    browser.js"
    />;
    Step 3: Add gatsby-browser.js
    @samjulien

    View Slide

  145. Build Time Runtime
    @samjulien

    View Slide

  146. No browser APIs available!
    @samjulien

    View Slide

  147. Watch out for dependencies using
    browser APIs like window or document.
    @samjulien

    View Slide

  148. Watch out for dependencies using
    browser APIs like window or document.
    @samjulien
    (Spoilers: auth libraries usually do this a lot because of redirects and pop-ups.)

    View Slide

  149. Step 4 (maybe): Add gatsby-node.js
    @samjulien

    View Slide

  150. gatsby-node.js
    @samjulien

    View Slide

  151. @samjulien
    exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (["build-html", “develop-html"].includes(stage)) {
    actions.setWebpackConfig({
    module: {
    rules: [
    {
    test: /auth-sdk/,
    use: loaders.null(),
    },
    ],
    },
    });
    }
    };

    View Slide

  152. @samjulien
    exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (["build-html", “develop-html"].includes(stage)) {
    actions.setWebpackConfig({
    module: {
    rules: [
    {
    test: /auth-sdk/,
    use: loaders.null(),
    },
    ],
    },
    });
    }
    };

    View Slide

  153. @samjulien
    exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (["build-html", "develop-html"].includes(stage)) {
    actions.setWebpackConfig({
    module: {
    rules: [
    {
    test: /auth-sdk/,
    use: loaders.null(),
    },
    ],
    },
    });
    }
    };

    View Slide

  154. @samjulien
    exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (["build-html", "develop-html"].includes(stage)) {
    actions.setWebpackConfig({
    module: {
    rules: [
    {
    test: /auth-sdk/,
    use: loaders.null(),
    },
    ],
    },
    });
    }
    };

    View Slide

  155. @samjulien
    exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (["build-html", "develop-html"].includes(stage)) {
    actions.setWebpackConfig({
    module: {
    rules: [
    {
    test: /auth-sdk/,
    use: loaders.null(),
    },
    ],
    },
    });
    }
    };

    View Slide

  156. @samjulien
    exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (["build-html", "develop-html"].includes(stage)) {
    actions.setWebpackConfig({
    module: {
    rules: [
    {
    test: /auth-sdk/,
    use: loaders.null(),
    },
    ],
    },
    });
    }
    };

    View Slide

  157. Step 4 (maybe): Add gatsby-node.js
    @samjulien

    View Slide

  158. path="./gatsby-node.js"
    content="./auth-recipe/gatsby-
    node.js"
    />;
    Step 4 (maybe): Add gatsby-node.js
    @samjulien

    View Slide

  159. Run from the CLI
    @samjulien

    View Slide

  160. Step 5: Run your recipe!
    @samjulien

    View Slide

  161. gatsby recipes ./auth-recipe/recipe.mdx
    Step 5: Run your recipe!
    @samjulien

    View Slide

  162. Level up: Update this to create a local plugin
    @samjulien

    View Slide

  163. @samjulien
    name="gatsby-plugin-auth-recipe"
    options={{
    domain: `domain.auth-provider.com`,
    clientId: `theclientid`,
    }}
    />;

    View Slide

  164. Let’s Review
    @samjulien

    View Slide

  165. @samjulien

    View Slide

  166. Static Site Generator
    @samjulien

    View Slide

  167. Dynamic Site Framework
    @samjulien

    View Slide

  168. @samjulien

    +

    View Slide

  169. @samjulien

    +

    View Slide

  170. @samjulien

    View Slide

  171. Build Time Runtime
    @samjulien

    View Slide

  172. Build Time Runtime
    @samjulien

    View Slide

  173. Start login
    Handle redirect
    Log in to provider
    @samjulien

    View Slide

  174. Handle redirect
    Success
    Error
    @samjulien

    View Slide

  175. Success
    User Token
    @samjulien

    View Slide

  176. Success
    User Token
    Redirect
    @samjulien

    View Slide

  177. @samjulien

    View Slide

  178. Auth Utility
    @samjulien

    View Slide

  179. @samjulien
    Auth Utility

    View Slide

  180. @samjulien
    Store token and user in memory
    Auth Utility

    View Slide

  181. @samjulien
    Store token and user in memory
    Interact with auth SDK
    Auth Utility

    View Slide

  182. @samjulien
    Store token and user in memory
    Interact with auth SDK
    Handle all redirect logic
    Auth Utility

    View Slide

  183. @samjulien
    export const AuthContext = React.createContext(defaultContext);
    export const useAuth = () => useContext(AuthContext);

    View Slide

  184. @samjulien
    return (
    value={{
    isAuthenticated,
    user,
    token,
    loading,
    handleRedirectCallback,
    getToken: (...p) => authClient.getTokenSilently(...p),
    logout: (...p) => authClient.logout(...p),
    }}
    >
    {children}

    );

    View Slide

  185. @samjulien
    const defaultContext = {
    isAuthenticated: false,
    user: null,
    token: null,
    loading: false,
    login: () => {},
    };

    View Slide

  186. @samjulien

    View Slide

  187. @samjulien

    View Slide

  188. @samjulien

    View Slide

  189. @samjulien


    View Slide

  190. Gatsby Recipes #
    @samjulien

    View Slide

  191. Gatsby Recipes #
    @samjulien

    View Slide

  192. Automate common tasks
    Gatsby Recipes #
    @samjulien

    View Slide

  193. Automate common tasks
    Gatsby Recipes #
    Written in MDX
    @samjulien

    View Slide

  194. Automate common tasks
    Gatsby Recipes #
    Install packages and plugins
    Written in MDX
    @samjulien

    View Slide

  195. Automate common tasks
    Gatsby Recipes #
    Install packages and plugins
    Generate pages and code
    Written in MDX
    @samjulien

    View Slide

  196. Automate common tasks
    Run from the CLI
    Gatsby Recipes #
    Install packages and plugins
    Generate pages and code
    Written in MDX
    @samjulien

    View Slide

  197. Step 0: Create a local MDX file or a Gist.
    @samjulien

    View Slide

  198. Step 1: Install Auth SDK

    @samjulien

    View Slide

  199. Step 2: Add Auth Provider
    content="./auth-recipe/auth.js" />
    @samjulien

    View Slide

  200. path="./gatsby-browser.js"
    content="./auth-recipe/gatsby-
    browser.js"
    />;
    Step 3: Add gatsby-browser.js
    @samjulien

    View Slide

  201. export const wrapRootElement = ({ element }) => {
    return (
    // pass in any configuration here
    >
    {element}

    );
    };
    @samjulien

    View Slide

  202. path="./gatsby-node.js"
    content="./auth-recipe/gatsby-
    node.js"
    />;
    Step 4 (maybe): Add gatsby-node.js
    @samjulien

    View Slide

  203. Build Time Runtime
    @samjulien

    View Slide

  204. No browser APIs available!
    @samjulien

    View Slide

  205. Watch out for dependencies using
    browser APIs like window or document.
    @samjulien

    View Slide

  206. Watch out for dependencies using
    browser APIs like window or document.
    @samjulien
    (Spoilers: auth libraries usually do this a lot because of redirects and pop-ups.)

    View Slide

  207. @samjulien
    exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (stage === "build-html") {
    actions.setWebpackConfig({
    module: {
    rules: [
    {
    test: /auth-sdk/,
    use: loaders.null(),
    },
    ],
    },
    });
    }
    };

    View Slide

  208. gatsby recipes ./auth-recipe/recipe.mdx
    Step 5: Run your recipe!
    @samjulien

    View Slide

  209. Level up: Update this to create a local plugin
    @samjulien

    View Slide

  210. @samjulien

    View Slide

  211. samj.im/gatsby-days
    @samjulien

    View Slide

  212. samj.im/gatsby-days
    Thank you!
    @samjulien

    View Slide