[next] Auth Popup v2 (#2101)

* feat: Implement new Sign In view

* feat: Move forgot + resetPassword to new design

* feat: Implement sign up with new design

* fix: narrow gutter

* test: add unit tests

* test: integration tests

* feat: support show / hide password

* feat: support oauth2 flow

* feat: add views for user completion

* feat: implement oauth2 sign up

* test: fix snapshots

* fix: lint

* fix: get more complete mutation response

* fix: removed array of OIDC integrations

* fix: renamed resolver function

* fix: adapt oidc client implementation

* fix: targetFilter should be stream on signup

* fix: removed unneeded message

* fix: moved password into local profile

* fix: made username optional, removed valid null value

* fix: linting

* fix: respect targetFilter

* feat: support user registration mutations

- Added `setUsername`
- Added `setEmail`
- Added `setPassword`
- Added `permit` to `@auth`
- Added `email` to `User`

* fix: fixed issue with query

* feat: added user password update

* feat: complete sign in mutation

* fix: adapt some rebasing gitches

* test: improve tests

* test: unittest for setting auth token

* fix: failing tests

* test: move most tests from enzyme to react-test-renderer

* fix: remove schema warnings in tests

* test: improve window mock

* test: test different social login configurations

* test: test social logins for sign up

* fix: use htmlFor instead of for

* test: more feature tests

* feat: always go through account completion

* test: feature test account completion

* feat: addtional account completion test

* Update start.ts

* chore: refactor auth token retrieval logic

src/core/client/stream/components/App.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,6 +9,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof App> = {
     activeTab: "COMMENTS",
   };
-  const wrapper = shallow(<App {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<App {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/components/Timestamp.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,6 +9,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof Timestamp> = {
     children: "1995-12-17T03:24:00.000Z",
   };
-  const wrapper = shallow(<Timestamp {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Timestamp {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/components/UserBoxAuthenticated.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -12,8 +12,9 @@ it("renders correctly with logout button", () => {
     username: "Username",
     showLogoutButton: true,
   };
-  const wrapper = shallow(<UserBoxAuthenticated {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<UserBoxAuthenticated {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders correctly without logout button", () => {
@@ -22,6 +23,7 @@ it("renders correctly without logout button", () => {
     username: "Username",
     showLogoutButton: false,
   };
-  const wrapper = shallow(<UserBoxAuthenticated {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<UserBoxAuthenticated {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/components/UserBoxUnauthenticated.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -12,8 +12,9 @@ it("renders correctly", () => {
     onRegister: noop,
     showRegisterButton: true,
   };
-  const wrapper = shallow(<UserBoxUnauthenticated {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<UserBoxUnauthenticated {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders correctly hides showRegisterButton", () => {
@@ -22,6 +23,7 @@ it("renders correctly hides showRegisterButton", () => {
     onRegister: noop,
     showRegisterButton: false,
   };
-  const wrapper = shallow(<UserBoxUnauthenticated {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<UserBoxUnauthenticated {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/containers/UserBoxContainer.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { removeFragmentRefs } from "talk-framework/testHelpers";
 import { PropTypesOf } from "talk-framework/types";
@@ -26,20 +26,31 @@ it("renders fully", () => {
           facebook: {
             enabled: true,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           google: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
-          sso: {
+          oidc: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           local: {
             enabled: true,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
-          oidc: [],
         },
       },
     },
@@ -50,8 +61,9 @@ it("renders fully", () => {
     // tslint:disable-next-line:no-empty
     signOut: async () => {},
   };
-  const wrapper = shallow(<UserBoxContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<UserBoxContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders without logout button", () => {
@@ -71,20 +83,31 @@ it("renders without logout button", () => {
           facebook: {
             enabled: true,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           google: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
-          sso: {
+          oidc: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           local: {
             enabled: true,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
-          oidc: [],
         },
       },
     },
@@ -95,8 +118,9 @@ it("renders without logout button", () => {
     // tslint:disable-next-line:no-empty
     signOut: async () => {},
   };
-  const wrapper = shallow(<UserBoxContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<UserBoxContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders sso only", () => {
@@ -116,20 +140,31 @@ it("renders sso only", () => {
           facebook: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           google: {
-            enabled: false,
-            allowRegistration: true,
-          },
-          sso: {
             enabled: true,
             allowRegistration: true,
+            targetFilter: {
+              stream: false,
+            },
+          },
+          oidc: {
+            enabled: false,
+            allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           local: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
-          oidc: [],
         },
       },
     },
@@ -140,11 +175,12 @@ it("renders sso only", () => {
     // tslint:disable-next-line:no-empty
     signOut: async () => {},
   };
-  const wrapper = shallow(<UserBoxContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<UserBoxContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
-it("renders sso only without logut button", () => {
+it("renders sso only without logout button", () => {
   const props: PropTypesOf<typeof UserBoxContainerN> = {
     local: {
       authPopup: {
@@ -161,20 +197,31 @@ it("renders sso only without logut button", () => {
           facebook: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           google: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
-          sso: {
-            enabled: true,
+          oidc: {
+            enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           local: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
-          oidc: [],
         },
       },
     },
@@ -185,8 +232,9 @@ it("renders sso only without logut button", () => {
     // tslint:disable-next-line:no-empty
     signOut: async () => {},
   };
-  const wrapper = shallow(<UserBoxContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<UserBoxContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders without register button", () => {
@@ -206,20 +254,31 @@ it("renders without register button", () => {
           facebook: {
             enabled: true,
             allowRegistration: false,
+            targetFilter: {
+              stream: true,
+            },
           },
           google: {
             enabled: false,
-            allowRegistration: false,
+            allowRegistration: true,
+            targetFilter: {
+              stream: false,
+            },
           },
-          sso: {
+          oidc: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           local: {
             enabled: true,
             allowRegistration: false,
+            targetFilter: {
+              stream: true,
+            },
           },
-          oidc: [],
         },
       },
     },
@@ -230,6 +289,7 @@ it("renders without register button", () => {
     // tslint:disable-next-line:no-empty
     signOut: async () => {},
   };
-  const wrapper = shallow(<UserBoxContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<UserBoxContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/containers/UserBoxContainer.tsx

@@ -45,23 +45,22 @@ export class UserBoxContainer extends Component<InnerProps> {
 
   private get supportsRegister() {
     const integrations = this.props.settings.auth.integrations;
-    return (
-      (integrations.facebook.allowRegistration &&
-        integrations.facebook.enabled) ||
-      (integrations.google.allowRegistration && integrations.google.enabled) ||
-      (integrations.local.allowRegistration && integrations.local.enabled) ||
-      integrations.oidc.some(c => c.allowRegistration && c.enabled)
-    );
+    return [
+      integrations.facebook,
+      integrations.google,
+      integrations.local,
+      integrations.oidc,
+    ].some(i => i.allowRegistration && i.enabled && i.targetFilter.stream);
   }
 
   private get weControlAuth() {
     const integrations = this.props.settings.auth.integrations;
-    return (
-      integrations.facebook.enabled ||
-      integrations.google.enabled ||
-      integrations.local.enabled ||
-      integrations.oidc.some(c => c.enabled)
-    );
+    return [
+      integrations.facebook,
+      integrations.google,
+      integrations.local,
+      integrations.oidc,
+    ].some(i => i.enabled && i.targetFilter.stream);
   }
 
   public render() {
@@ -75,7 +74,7 @@ export class UserBoxContainer extends Component<InnerProps> {
     if (me) {
       return (
         <UserBoxAuthenticated
-          onSignOut={(this.weControlAuth && this.handleSignOut) || undefined}
+          onSignOut={this.handleSignOut}
           username={me.username!}
           showLogoutButton={this.supportsLogout}
         />
@@ -91,7 +90,7 @@ export class UserBoxContainer extends Component<InnerProps> {
         <Popup
           href={`${urls.embed.auth}?view=${view}`}
           title="Talk Auth"
-          features="menubar=0,resizable=0,width=350,height=395,top=200,left=500"
+          features="menubar=0,resizable=0,width=350,height=450,top=100,left=500"
           open={open}
           focus={focus}
           onFocus={this.handleFocus}
@@ -138,22 +137,30 @@ const enhanced = withSignOutMutation(
                   local {
                     enabled
                     allowRegistration
-                  }
-                  sso {
-                    enabled
-                    allowRegistration
+                    targetFilter {
+                      stream
+                    }
                   }
                   oidc {
                     enabled
                     allowRegistration
+                    targetFilter {
+                      stream
+                    }
                   }
                   google {
                     enabled
                     allowRegistration
+                    targetFilter {
+                      stream
+                    }
                   }
                   facebook {
                     enabled
                     allowRegistration
+                    targetFilter {
+                      stream
+                    }
                   }
                 }
               }

src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders fully 1`] = `
-<Fragment>
+<React.Fragment>
   <Popup
-    features="menubar=0,resizable=0,width=350,height=395,top=200,left=500"
+    features="menubar=0,resizable=0,width=350,height=450,top=100,left=500"
     focus={false}
     href="/embed/auth?view=SIGN_IN"
     onBlur={[Function]}
@@ -17,17 +17,17 @@ exports[`renders fully 1`] = `
     onSignIn={[Function]}
     showRegisterButton={true}
   />
-</Fragment>
+</React.Fragment>
 `;
 
-exports[`renders sso only 1`] = `""`;
+exports[`renders sso only 1`] = `null`;
 
-exports[`renders sso only without logut button 1`] = `""`;
+exports[`renders sso only without logout button 1`] = `null`;
 
 exports[`renders without logout button 1`] = `
-<Fragment>
+<React.Fragment>
   <Popup
-    features="menubar=0,resizable=0,width=350,height=395,top=200,left=500"
+    features="menubar=0,resizable=0,width=350,height=450,top=100,left=500"
     focus={false}
     href="/embed/auth?view=SIGN_IN"
     onBlur={[Function]}
@@ -41,13 +41,13 @@ exports[`renders without logout button 1`] = `
     onSignIn={[Function]}
     showRegisterButton={true}
   />
-</Fragment>
+</React.Fragment>
 `;
 
 exports[`renders without register button 1`] = `
-<Fragment>
+<React.Fragment>
   <Popup
-    features="menubar=0,resizable=0,width=350,height=395,top=200,left=500"
+    features="menubar=0,resizable=0,width=350,height=450,top=100,left=500"
     focus={false}
     href="/embed/auth?view=SIGN_IN"
     onBlur={[Function]}
@@ -60,5 +60,5 @@ exports[`renders without register button 1`] = `
     onSignIn={[Function]}
     showRegisterButton={false}
   />
-</Fragment>
+</React.Fragment>
 `;

src/core/client/stream/index.tsx

@@ -8,7 +8,6 @@ import AppContainer from "talk-stream/containers/AppContainer";
 
 import {
   OnEvents,
-  OnPostMessageAuthError,
   OnPostMessageSetAuthToken,
   OnPymLogin,
   OnPymLogout,
@@ -23,7 +22,6 @@ const listeners = (
     <OnPymLogout />
     <OnPymSetCommentID />
     <OnPostMessageSetAuthToken />
-    <OnPostMessageAuthError />
     <OnEvents />
   </>
 );

src/core/client/stream/listeners/OnEvents.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { createSinonStub } from "talk-framework/testHelpers";
 
@@ -22,6 +22,8 @@ it("Broadcasts events to pym", () => {
     ),
   };
 
-  shallow(<OnEvents pym={pym as any} eventEmitter={eventEmitter} />);
+  createRenderer().render(
+    <OnEvents pym={pym as any} eventEmitter={eventEmitter} />
+  );
   expect(pym.sendMessage.calledOnce).toBe(true);
 });

src/core/client/stream/listeners/OnPostMessageAuthError.tsx

@@ -1,28 +0,0 @@
-import { Component } from "react";
-
-import { withContext } from "talk-framework/lib/bootstrap";
-import { PostMessageService } from "talk-framework/lib/postMessage";
-
-interface Props {
-  postMessage: PostMessageService;
-}
-
-class OnPostMessageAuthError extends Component<Props> {
-  constructor(props: Props) {
-    super(props);
-    // Auth popup will use this to send back errors during login.
-    props.postMessage!.on("authError", error => {
-      // tslint:disable-next-line:no-console
-      console.error(error);
-    });
-  }
-
-  public render() {
-    return null;
-  }
-}
-
-const enhanced = withContext(({ postMessage }) => ({ postMessage }))(
-  OnPostMessageAuthError
-);
-export default enhanced;

src/core/client/stream/listeners/OnPostMessageSetAuthToken.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { createSinonStub } from "talk-framework/testHelpers";
 
@@ -19,7 +19,7 @@ it("Listens to event and sets auth token", () => {
     s => s.withArgs({ authToken: token }).returns(null)
   );
 
-  shallow(
+  createRenderer().render(
     <OnPostMessageSetAuthToken
       postMessage={postMessage}
       setAuthToken={setAuthToken}

src/core/client/stream/listeners/OnPymLogin.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { createSinonStub } from "talk-framework/testHelpers";
 
@@ -19,6 +19,6 @@ it("Listens to event and calls setAuthToken", () => {
     s => s.withArgs({ authToken }).returns(null)
   );
 
-  shallow(<OnPymLogin pym={pym} setAuthToken={setAuthToken} />);
+  createRenderer().render(<OnPymLogin pym={pym} setAuthToken={setAuthToken} />);
   expect(setAuthToken.calledOnce);
 });

src/core/client/stream/listeners/OnPymLogout.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 import sinon from "sinon";
 
 import { OnPymLogout } from "./OnPymLogout";
@@ -15,6 +15,6 @@ it("Listens to event and calls signOut", () => {
 
   const signOut = sinon.stub();
 
-  shallow(<OnPymLogout pym={pym} signOut={signOut} />);
+  createRenderer().render(<OnPymLogout pym={pym} signOut={signOut} />);
   expect(signOut.calledOnce);
 });

src/core/client/stream/listeners/OnPymSetCommentID.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 import { Environment, RecordSource } from "relay-runtime";
 
 import { parseQuery } from "talk-common/utils";
@@ -36,7 +36,7 @@ it("Sets comment id", () => {
     } as any,
     relayEnvironment,
   };
-  shallow(<OnPymSetCommentID {...props} />);
+  createRenderer().render(<OnPymSetCommentID {...props} />);
   expect(source.get(LOCAL_ID)!.commentID).toEqual(id);
   expect(parseQuery(location.search).commentID).toEqual(id);
 });
@@ -52,7 +52,7 @@ it("Sets comment id to null when empty", () => {
     } as any,
     relayEnvironment,
   };
-  shallow(<OnPymSetCommentID {...props} />);
+  createRenderer().render(<OnPymSetCommentID {...props} />);
   expect(source.get(LOCAL_ID)!.commentID).toEqual(null);
   expect(parseQuery(location.search).commentID).toBeUndefined();
 });

src/core/client/stream/listeners/index.ts

@@ -2,7 +2,6 @@ export { default as OnPymSetCommentID } from "./OnPymSetCommentID";
 export {
   default as OnPostMessageSetAuthToken,
 } from "./OnPostMessageSetAuthToken";
-export { default as OnPostMessageAuthError } from "./OnPostMessageAuthError";
 export { default as OnEvents } from "./OnEvents";
 export { default as OnPymLogin } from "./OnPymLogin";
 export { default as OnPymLogout } from "./OnPymLogout";

src/core/client/stream/local/initLocalState.spec.ts

@@ -5,6 +5,7 @@ import { TalkContext } from "talk-framework/lib/bootstrap";
 import { LOCAL_ID } from "talk-framework/lib/relay";
 import { createPromisifiedStorage } from "talk-framework/lib/storage";
 import {
+  createAuthToken,
   createRelayEnvironment,
   replaceHistoryLocation,
 } from "talk-framework/testHelpers";
@@ -61,17 +62,7 @@ it("set authToken from localStorage", async () => {
   const context: Partial<TalkContext> = {
     localStorage: createPromisifiedStorage(),
   };
-  const authToken = `${btoa(
-    JSON.stringify({
-      alg: "HS256",
-      typ: "JWT",
-    })
-  )}.${btoa(
-    JSON.stringify({
-      exp: 1540503165,
-      jti: "31b26591-4e9a-4388-a7ff-e1bdc5d97cce",
-    })
-  )}`;
+  const authToken = createAuthToken();
   context.localStorage!.setItem("authToken", authToken);
   await initLocalState(environment, context as any);
   expect(source.get(LOCAL_ID)!.authToken).toBe(authToken);

src/core/client/stream/tabs/comments/components/Comment/ButtonsBar.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,6 +9,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof ButtonsBar> = {
     children: "children",
   };
-  const wrapper = shallow(<ButtonsBar {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<ButtonsBar {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Comment/Comment.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -15,6 +15,7 @@ it("renders username and body", () => {
     footer: "footer",
     showEditedMarker: true,
   };
-  const wrapper = shallow(<Comment {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Comment {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Comment/EditedMarker.spec.tsx

@@ -1,9 +1,10 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import EditedMarker from "./EditedMarker";
 
 it("renders correctly", () => {
-  const wrapper = shallow(<EditedMarker />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<EditedMarker />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Comment/InReplyTo.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,6 +9,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof InReplyTo> = {
     username: "Username",
   };
-  const wrapper = shallow(<InReplyTo {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<InReplyTo {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Comment/IndentedComment.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -12,6 +12,7 @@ it("renders correctly", () => {
     body: "Woof",
     createdAt: "1995-12-17T03:24:00.000Z",
   };
-  const wrapper = shallow(<IndentedComment {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<IndentedComment {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Comment/ReplyButton.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -12,6 +12,7 @@ it("renders correctly", () => {
     onClick: noop,
     active: true,
   };
-  const wrapper = shallow(<ReplyButton {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<ReplyButton {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -12,6 +12,7 @@ it("renders correctly", () => {
     onClick: noop,
     href: "http://localhost/comment",
   };
-  const wrapper = shallow(<ShowConversationLink {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<ShowConversationLink {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/CommentsPane.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,14 +9,16 @@ it("renders stream", () => {
   const props: PropTypesOf<typeof CommentsPane> = {
     showPermalinkView: false,
   };
-  const wrapper = shallow(<CommentsPane {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<CommentsPane {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders permalink view", () => {
   const props: PropTypesOf<typeof CommentsPane> = {
     showPermalinkView: true,
   };
-  const wrapper = shallow(<CommentsPane {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<CommentsPane {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/ConversationThread.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -27,8 +27,9 @@ describe("with 2 remaining parent comments", () => {
         username: "parentAuthor",
       },
     };
-    const wrapper = shallow(<ConversationThreadN {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const renderer = createRenderer();
+    renderer.render(<ConversationThreadN {...props} />);
+    expect(renderer.getRenderOutput()).toMatchSnapshot();
   });
   it("renders with disabled load more", () => {
     const props: PropTypesOf<typeof ConversationThreadN> = {
@@ -47,8 +48,9 @@ describe("with 2 remaining parent comments", () => {
         username: "parentAuthor",
       },
     };
-    const wrapper = shallow(<ConversationThreadN {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const renderer = createRenderer();
+    renderer.render(<ConversationThreadN {...props} />);
+    expect(renderer.getRenderOutput()).toMatchSnapshot();
   });
 });
 
@@ -65,6 +67,7 @@ it("renders with no parent comments", () => {
     parents: [],
     rootParent: null,
   };
-  const wrapper = shallow(<ConversationThreadN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<ConversationThreadN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Indent.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,8 +9,9 @@ it("renders level0", () => {
   const props: PropTypesOf<typeof Indent> = {
     children: <div>Hello World</div>,
   };
-  const wrapper = shallow(<Indent {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Indent {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders level1", () => {
@@ -18,8 +19,9 @@ it("renders level1", () => {
     level: 1,
     children: <div>Hello World</div>,
   };
-  const wrapper = shallow(<Indent {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Indent {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders without border", () => {
@@ -28,6 +30,7 @@ it("renders without border", () => {
     noBorder: true,
     children: <div>Hello World</div>,
   };
-  const wrapper = shallow(<Indent {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Indent {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/PermalinkView.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -18,8 +18,9 @@ it("renders correctly", () => {
     showAllCommentsHref: "http://localhost/link",
     onShowAllComments: noop,
   };
-  const wrapper = shallow(<PermalinkViewN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<PermalinkViewN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders comment not found", () => {
@@ -31,6 +32,7 @@ it("renders comment not found", () => {
     showAllCommentsHref: "http://localhost/link",
     onShowAllComments: noop,
   };
-  const wrapper = shallow(<PermalinkViewN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<PermalinkViewN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/PostCommentFormFake.spec.tsx

@@ -1,9 +1,10 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import PostCommentFormFake from "./PostCommentFormFake";
 
 it("renders correctly", () => {
-  const wrapper = shallow(<PostCommentFormFake />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<PostCommentFormFake />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/PoweredBy.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,6 +9,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof PoweredBy> = {
     className: "custom",
   };
-  const wrapper = shallow(<PoweredBy {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<PoweredBy {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/RTE.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -11,6 +11,7 @@ it("renders correctly", () => {
     placeholder: "Post a comment",
     value: "Hello world",
   };
-  const wrapper = shallow(<RTE {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<RTE {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/ReplyTo.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -9,6 +9,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof ReplyTo> = {
     username: "ParentAuthor",
   };
-  const wrapper = shallow(<ReplyTo {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<ReplyTo {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Timeline/Circle.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -11,6 +11,7 @@ it("renders correctly", () => {
     hollow: true,
     end: true,
   };
-  const wrapper = shallow(<Circle {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Circle {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/components/Timeline/Line.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { PropTypesOf } from "talk-framework/types";
 
@@ -10,6 +10,7 @@ it("renders correctly", () => {
     className: "root",
     dotted: true,
   };
-  const wrapper = shallow(<Line {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<Line {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { removeFragmentRefs } from "talk-framework/testHelpers";
 import { PropTypesOf } from "talk-framework/types";
@@ -44,8 +44,9 @@ it("renders username and body", () => {
     disableReplies: false,
   };
 
-  const wrapper = shallow(<CommentContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<CommentContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders body only", () => {
@@ -80,8 +81,9 @@ it("renders body only", () => {
     setCommentID: noop as any,
   };
 
-  const wrapper = shallow(<CommentContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<CommentContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("hide reply button", () => {
@@ -118,8 +120,9 @@ it("hide reply button", () => {
     disableReplies: true,
   };
 
-  const wrapper = shallow(<CommentContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<CommentContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("shows conversation link", () => {
@@ -158,8 +161,9 @@ it("shows conversation link", () => {
     showConversationLink: true,
   };
 
-  const wrapper = shallow(<CommentContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<CommentContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders in reply to", () => {
@@ -200,6 +204,7 @@ it("renders in reply to", () => {
     disableReplies: false,
   };
 
-  const wrapper = shallow(<CommentContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<CommentContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/containers/ReplyCommentFormContainer.spec.tsx

@@ -1,6 +1,7 @@
 import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
@@ -36,10 +37,10 @@ it("renders correctly", async () => {
     autofocus: false,
   };
 
-  const wrapper = shallow(<ReplyCommentFormContainerN {...props} />);
+  const renderer = createRenderer();
+  renderer.render(<ReplyCommentFormContainerN {...props} />);
   await timeout();
-  wrapper.update();
-  expect(wrapper).toMatchSnapshot();
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders with initialValues", async () => {
@@ -66,10 +67,10 @@ it("renders with initialValues", async () => {
     "Hello World!"
   );
 
-  const wrapper = shallow(<ReplyCommentFormContainerN {...props} />);
+  const renderer = createRenderer();
+  renderer.render(<ReplyCommentFormContainerN {...props} />);
   await timeout();
-  wrapper.update();
-  expect(wrapper).toMatchSnapshot();
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("save values", async () => {

src/core/client/stream/tabs/comments/queries/PermalinkViewQuery.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { render } from "./PermalinkViewQuery";
 
@@ -11,8 +11,9 @@ it("renders permalink view container", () => {
     } as any,
     error: null,
   };
-  const wrapper = shallow(React.createElement(() => render(data)));
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(React.createElement(() => render(data)));
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders loading", () => {
@@ -20,8 +21,9 @@ it("renders loading", () => {
     props: null,
     error: null,
   };
-  const wrapper = shallow(React.createElement(() => render(data)));
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(React.createElement(() => render(data)));
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders error", () => {
@@ -29,6 +31,7 @@ it("renders error", () => {
     props: null,
     error: new Error("error"),
   };
-  const wrapper = shallow(React.createElement(() => render(data)));
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(React.createElement(() => render(data)));
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/comments/queries/StreamQuery.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { render } from "./StreamQuery";
 
@@ -10,8 +10,9 @@ it("renders stream container", () => {
     } as any,
     error: null,
   };
-  const wrapper = shallow(React.createElement(() => render(data)));
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(React.createElement(() => render(data)));
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders loading", () => {
@@ -19,8 +20,9 @@ it("renders loading", () => {
     props: null,
     error: null,
   };
-  const wrapper = shallow(React.createElement(() => render(data)));
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(React.createElement(() => render(data)));
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders error", () => {
@@ -28,6 +30,7 @@ it("renders error", () => {
     props: null,
     error: new Error("error"),
   };
-  const wrapper = shallow(React.createElement(() => render(data)));
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(React.createElement(() => render(data)));
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/profile/components/CommentHistory.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { removeFragmentRefs } from "talk-framework/testHelpers";
 import { PropTypesOf } from "talk-framework/types";
@@ -17,8 +17,9 @@ it("renders correctly", () => {
     hasMore: false,
     disableLoadMore: false,
   };
-  const wrapper = shallow(<CommentHistoryN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<CommentHistoryN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 describe("has more", () => {
@@ -30,8 +31,9 @@ describe("has more", () => {
       hasMore: true,
       disableLoadMore: false,
     };
-    const wrapper = shallow(<CommentHistoryN {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const renderer = createRenderer();
+    renderer.render(<CommentHistoryN {...props} />);
+    expect(renderer.getRenderOutput()).toMatchSnapshot();
   });
   it("disables load more", () => {
     const props: PropTypesOf<typeof CommentHistoryN> = {
@@ -41,7 +43,8 @@ describe("has more", () => {
       hasMore: true,
       disableLoadMore: true,
     };
-    const wrapper = shallow(<CommentHistoryN {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const renderer = createRenderer();
+    renderer.render(<CommentHistoryN {...props} />);
+    expect(renderer.getRenderOutput()).toMatchSnapshot();
   });
 });

src/core/client/stream/tabs/profile/components/HistoryComment.spec.tsx

@@ -1,6 +1,6 @@
-import { shallow } from "enzyme";
 import { noop } from "lodash";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { removeFragmentRefs } from "talk-framework/testHelpers";
 import { PropTypesOf } from "talk-framework/types";
@@ -22,6 +22,7 @@ it("renders correctly", () => {
     conversationURL: "http://localhost/conversation",
     onGotoConversation: noop,
   };
-  const wrapper = shallow(<HistoryCommentN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<HistoryCommentN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/profile/components/Profile.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { removeFragmentRefs } from "talk-framework/testHelpers";
 import { PropTypesOf } from "talk-framework/types";
@@ -14,6 +14,7 @@ it("renders correctly", () => {
     me: {},
     settings: {},
   };
-  const wrapper = shallow(<ProfileN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<ProfileN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/tabs/profile/components/__snapshots__/CommentHistory.spec.tsx.snap

@@ -19,7 +19,6 @@ exports[`has more disables load more 1`] = `
         "id": "comment-1",
       }
     }
-    key="comment-1"
     story={Object {}}
   />
   <withContext(createMutationContainer(Relay(HistoryCommentContainer)))
@@ -28,7 +27,6 @@ exports[`has more disables load more 1`] = `
         "id": "comment-2",
       }
     }
-    key="comment-2"
     story={Object {}}
   />
   <Localized
@@ -67,7 +65,6 @@ exports[`has more renders correctly 1`] = `
         "id": "comment-1",
       }
     }
-    key="comment-1"
     story={Object {}}
   />
   <withContext(createMutationContainer(Relay(HistoryCommentContainer)))
@@ -76,7 +73,6 @@ exports[`has more renders correctly 1`] = `
         "id": "comment-2",
       }
     }
-    key="comment-2"
     story={Object {}}
   />
   <Localized
@@ -115,7 +111,6 @@ exports[`renders correctly 1`] = `
         "id": "comment-1",
       }
     }
-    key="comment-1"
     story={Object {}}
   />
   <withContext(createMutationContainer(Relay(HistoryCommentContainer)))
@@ -124,7 +119,6 @@ exports[`renders correctly 1`] = `
         "id": "comment-2",
       }
     }
-    key="comment-2"
     story={Object {}}
   />
 </withPropsOnChange(HorizontalGutter)>

src/core/client/stream/test/fixtures.ts

@@ -12,20 +12,38 @@ export const settings = {
       facebook: {
         enabled: false,
         allowRegistration: true,
+        targetFilter: {
+          stream: true,
+        },
       },
       google: {
         enabled: false,
         allowRegistration: true,
+        targetFilter: {
+          stream: true,
+        },
+      },
+      oidc: {
+        enabled: false,
+        allowRegistration: true,
+        targetFilter: {
+          stream: true,
+        },
       },
       sso: {
         enabled: false,
         allowRegistration: true,
+        targetFilter: {
+          stream: true,
+        },
       },
       local: {
         enabled: true,
         allowRegistration: true,
+        targetFilter: {
+          stream: true,
+        },
       },
-      oidc: [],
     },
   },
   reaction: {