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!

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