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 some tips and tricks to avoid common pitfalls with adding auth to Gatsby. By the end, you’ll be ready for the next level of your Gatsby quest!

Transcript

1. View Slide

2. Power Up Gatsby
   

   View Slide

3. 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. Adding Auth to Gatsby
    @samjulien
    

    View Slide

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

    View Slide

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

    View Slide

15. Adding Auth to Gatsby
    @samjulien
    Build Time vs. Runtime
    Using Hooks for Auth
    Special Gatsby Bits
    

    View Slide

16. @samjulien
    Sam Julien
    @samjulien
    

    View Slide

17. @samjulien
    Sam Julien
    @samjulien
    Sr. Developer Advocate Engineer at Auth0
    

    View Slide

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

    View Slide

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

    View Slide

20. Adding Auth to Gatsby
    @samjulien
    Build Time vs. Runtime
    Using Hooks for Auth
    Special Gatsby Bits
    

    View Slide

21. @samjulien
    

    View Slide

22. Build Time Runtime
    

    View Slide

23. Build Time
    Runtime
    

    View Slide

24. Build Time
    Runtime
    
    

    View Slide

25. Build Time
    Runtime
    
    
    

    View Slide

26. No browser APIs available!
    @samjulien
    

    View Slide

27. Build Time
    Runtime
    
    

    View Slide

28. Build Time Runtime
    

    View Slide

29. Build Time
    Runtime
    

    View Slide

30. Build Time
    Runtime
    
    

    View Slide

31. Build Time
    Runtime
    
    
    

    View Slide

32. Build Time Runtime
    

    View Slide

33. Build Time Runtime
    

    View Slide

34. @samjulien
    
    +
    

    View Slide

35. @samjulien
    
    +
    

    View Slide

36. @samjulien
    
    

    View Slide

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

    View Slide

38. Handle redirect
    Success
    Error
    @samjulien
    

    View Slide

39. Success
    User Token
    @samjulien
    

    View Slide

40. Success
    User Token
    Redirect
    @samjulien
    

    View Slide

41. Adding Auth to Gatsby
    @samjulien
    Build Time vs. Runtime
    Using Hooks for Auth
    Special Gatsby Bits
    

    View Slide

42. @samjulien
    

    View Slide

43. Auth Utility
    @samjulien
    

    View Slide

44. @samjulien
    Auth Utility
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    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 AuthProvider = ({
    children,
    ...initOptions
    }) => {...};
    

    View Slide

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

    View Slide

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

    View Slide

56. @samjulien
    ...
    

    View Slide

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

    View Slide

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

    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
    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

63. @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

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
    // 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

67. @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

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
    const handleRedirectCallback = async () => {
    // handle callback
    // use hooks to set state
    };
    

    View Slide

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

    View Slide

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

    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. Auth Utility
    @samjulien
    

    View Slide

80. @samjulien
    Auth Utility
    

    View Slide

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

    View Slide

82. 
    @samjulien
    

    View Slide

83. Where do we use this AuthProvider?
    @samjulien
    

    View Slide

84. Adding Auth to Gatsby
    @samjulien
    Build Time vs. Runtime
    Using Hooks for Auth
    Special Gatsby Bits
    

    View Slide

85. Where do we use this AuthProvider?
    @samjulien
    

    View Slide

86. gatsby-browser.js
    @samjulien
    

    View Slide

87. export const wrapRootElement = ({ element }) => {
    return (
    // pass in any configuration here
    >
    {element}
    
    );
    };
    @samjulien
    

    View Slide

88. export const wrapRootElement = ({ element }) => {
    return (
    // pass in any configuration here
    >
    {element}
    
    );
    };
    @samjulien
    

    View Slide

89. export const wrapRootElement = ({ element }) => {
    return (
    // pass in any configuration here
    >
    {element}
    
    );
    };
    @samjulien
    

    View Slide

90. Does our app work?
    @samjulien
    

    View Slide

91. Maybe.
    @samjulien
    

    View Slide

92. gatsby develop vs gatsby build
    @samjulien
    

    View Slide

93. View Slide

94. View Slide

95. Build Time Runtime
    

    View Slide

96. Build Time
    Runtime
    

    View Slide

97. Build Time
    Runtime
    
    

    View Slide

98. Build Time
    Runtime
    
    
    

    View Slide

99. Build Time Runtime
    

    View Slide

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

     View Slide

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

     View Slide

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

     View Slide

103. Why do we do this?
     @samjulien
     

     View Slide

104. Example: NavBar Component
     @samjulien
     

     View Slide

105. @samjulien
     const NavBar = () => {
     const { isAuthenticated, login, logout } = useAuth();
     return (
     
     Home{" "}
     {!isAuthenticated && login()}>Log in}
     {isAuthenticated && (
     <>
     Profile
     logout()}>Log out
     >
     )}
     
     );
     };
     

     View Slide

106. @samjulien
     const NavBar = () => {
     const { isAuthenticated, login, logout } = useAuth();
     return (
     
     Home{" "}
     {!isAuthenticated && login()}>Log in}
     {isAuthenticated && (
     <>
     Profile
     logout()}>Log out
     >
     )}
     
     );
     };
     

     View Slide

107. @samjulien
     const NavBar = () => {
     const { isAuthenticated, login, logout } = useAuth();
     return (
     
     Home{" "}
     {!isAuthenticated && login()}>Log in}
     {isAuthenticated && (
     <>
     Profile
     logout()}>Log out
     >
     )}
     
     );
     };
     

     View Slide

108. @samjulien
     const NavBar = () => {
     const { isAuthenticated, login, logout } = useAuth();
     return (
     
     Home{" "}
     {!isAuthenticated && login()}>Log in}
     {isAuthenticated && (
     <>
     Profile
     logout()}>Log out
     >
     )}
     
     );
     };
     

     View Slide

109. @samjulien
     const NavBar = () => {
     const { isAuthenticated, login, logout } = useAuth();
     return (
     
     Home{" "}
     {!isAuthenticated && login()}>Log in}
     {isAuthenticated && (
     <>
     Profile
     logout()}>Log out
     >
     )}
     
     );
     };
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

114. @samjulien
     
     
     

     View Slide

115. @samjulien
     
     
     

     View Slide

116. @samjulien
     
     
     

     View Slide

117. @samjulien
     
     

     View Slide

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

     View Slide

119. @samjulien
     
     

     View Slide

120. @samjulien
     
     

     View Slide

121. @samjulien
     
     

     View Slide

122. @samjulien
     
     
     

     View Slide

123. Build Time Runtime
     

     View Slide

124. No browser APIs available!
     @samjulien
     

     View Slide

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

     View Slide

126. 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

127. gatsby-node.js
     @samjulien
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

134. You may need to conditionally set values
     depending on if you’re in the browser.
     @samjulien
     

     View Slide

135. @samjulien
     export const isBrowser = typeof window !== "undefined";
     

     View Slide

136. @samjulien
     if (isBrowser) {
     changeWindowLocation();
     }
     

     View Slide

137. Let’s Review
     

     View Slide

138. @samjulien
     

     View Slide

139. Static Site Generator
     @samjulien
     

     View Slide

140. Dynamic Site Framework
     @samjulien
     

     View Slide

141. @samjulien
     
     +
     

     View Slide

142. @samjulien
     
     +
     

     View Slide

143. @samjulien
     
     

     View Slide

144. Build Time Runtime
     

     View Slide

145. Build Time Runtime
     

     View Slide

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

     View Slide

147. Handle redirect
     Success
     Error
     @samjulien
     

     View Slide

148. Success
     User Token
     @samjulien
     

     View Slide

149. Success
     User Token
     Redirect
     @samjulien
     

     View Slide

150. @samjulien
     

     View Slide

151. Auth Utility
     @samjulien
     

     View Slide

152. @samjulien
     Auth Utility
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

158. Adding Auth to Gatsby
     @samjulien
     Build Time vs. Runtime
     Using Hooks for Auth
     Special Gatsby Bits
     

     View Slide

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

     View Slide

160. @samjulien
     
     

     View Slide

161. @samjulien
     
     

     View Slide

162. @samjulien
     
     

     View Slide

163. @samjulien
     
     
     

     View Slide

164. Build Time Runtime
     

     View Slide

165. No browser APIs available!
     @samjulien
     

     View Slide

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

     View Slide

167. 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

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

     View Slide

169. @samjulien
     export const isBrowser = typeof window !== "undefined";
     

     View Slide

170. @samjulien
     

     View Slide

171. samj.im/gatsby-auth
     @samjulien
     

     View Slide

172. samj.im/gatsby-auth
     Thank you!
     @samjulien
     

     View Slide