diff --git a/.gitignore b/.gitignore
index f0c3b2a4b..11e738d57 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,6 +17,7 @@ coverage/
 plugins.json
 plugins/*
 !plugins/coral-plugin-facebook-auth
+!plugins/coral-plugin-auth
 !plugins/coral-plugin-respect
 !plugins/coral-plugin-offtopic
 !plugins/coral-plugin-like
diff --git a/client/coral-admin/src/actions/auth.js b/client/coral-admin/src/actions/auth.js
index 29971e294..d5a1eeea1 100644
--- a/client/coral-admin/src/actions/auth.js
+++ b/client/coral-admin/src/actions/auth.js
@@ -1,6 +1,6 @@
 import * as actions from '../constants/auth';
-import * as Storage from 'coral-framework/helpers/storage';
 import coralApi from 'coral-framework/helpers/response';
+import * as Storage from 'coral-framework/helpers/storage';
 import {handleAuthToken} from 'coral-framework/actions/auth';
 
 //==============================================================================
@@ -52,7 +52,9 @@ const forgotPassowordFailure = () => ({
 
 export const requestPasswordReset = (email) => (dispatch) => {
   dispatch(forgotPassowordRequest(email));
-  return coralApi('/account/password/reset', {method: 'POST', body: {email}})
+  const redirectUri = location.href;
+
+  return coralApi('/account/password/reset', {method: 'POST', body: {email,  loc: redirectUri}})
     .then(() => dispatch(forgotPassowordSuccess()))
     .catch((error) => dispatch(forgotPassowordFailure(error)));
 };
diff --git a/client/coral-embed-stream/src/AppRouter.js b/client/coral-embed-stream/src/AppRouter.js
index e2553889c..6ee63caab 100644
--- a/client/coral-embed-stream/src/AppRouter.js
+++ b/client/coral-embed-stream/src/AppRouter.js
@@ -2,12 +2,12 @@ import React from 'react';
 import {Router, Route, browserHistory} from 'react-router';
 
 import Embed from './containers/Embed';
-import SignInContainer from 'coral-sign-in/containers/SignInContainer';
+import {LoginContainer} from 'coral-sign-in/containers/LoginContainer';
 
 const routes = (
   <div>
-    <Route exact path="/embed/stream/login" component={SignInContainer}/>
-    <Route exact path="*" component={Embed}/>
+    <Route exact path="/embed/stream/login" component={LoginContainer}/>
+    <Route path="*" component={Embed}/>
   </div>
 );
 
diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index 5f27293d7..7d135d7f0 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -1,74 +1,68 @@
 import React from 'react';
+const lang = new I18n(translations);
+import Stream from '../containers/Stream';
+import Slot from 'coral-framework/components/Slot';
+import {can} from 'coral-framework/services/perms';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations';
-import {can} from 'coral-framework/services/perms';
-const lang = new I18n(translations);
-
 import {TabBar, Tab, TabContent, Button} from 'coral-ui';
-
-import Stream from '../containers/Stream';
 import Count from 'coral-plugin-comment-count/CommentCount';
-import UserBox from 'coral-sign-in/components/UserBox';
 import ProfileContainer from 'coral-settings/containers/ProfileContainer';
-import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';
+import ConfigureStreamContainer
+  from 'coral-configure/containers/ConfigureStreamContainer';
 
 export default class Embed extends React.Component {
   changeTab = (tab) => {
-    switch(tab) {
+    switch (tab) {
     case 0:
       this.props.setActiveTab('stream');
       break;
     case 1:
       this.props.setActiveTab('profile');
 
-      // TODO: move data fetching to profile container.
+        // TODO: move data fetching to profile container.
       this.props.data.refetch();
       break;
     case 2:
       this.props.setActiveTab('config');
 
-      // TODO: move data fetching to config container.
+        // TODO: move data fetching to config container.
       this.props.data.refetch();
       break;
     }
-  }
+  };
 
   handleShowProfile = () => this.props.setActiveTab('profile');
 
-  render () {
-    const {activeTab, logout, viewAllComments, commentId} = this.props;
+  render() {
+    const {activeTab, viewAllComments, commentId} = this.props;
     const {asset: {totalCommentCount}} = this.props.root;
-    const {loggedIn, user} = this.props.auth;
-
-    const userBox = <UserBox user={user} onLogout={logout} onShowProfile={this.handleShowProfile}/>;
+    const {user} = this.props.auth;
 
     return (
       <div>
         <div className="commentStream">
           <TabBar onChange={this.changeTab} activeTab={activeTab}>
-            <Tab><Count count={totalCommentCount}/></Tab>
+            <Tab><Count count={totalCommentCount} /></Tab>
             <Tab>{lang.t('myProfile')}</Tab>
             <Tab restricted={!can(user, 'UPDATE_CONFIG')}>Configure Stream</Tab>
           </TabBar>
-          {
-            commentId &&
-              <Button
-                cStyle='darkGrey'
-                style={{float: 'right'}}
-                onClick={viewAllComments}
-              >
-                {lang.t('showAllComments')}
-              </Button>
-          }
+          {commentId &&
+            <Button
+              cStyle="darkGrey"
+              style={{float: 'right'}}
+              onClick={viewAllComments}
+            >
+              {lang.t('showAllComments')}
+            </Button>}
+          <Slot fill="embed" />
           <TabContent show={activeTab === 'stream'}>
-            { loggedIn ? userBox : null }
             <Stream data={this.props.data} root={this.props.root} />
           </TabContent>
           <TabContent show={activeTab === 'profile'}>
             <ProfileContainer />
           </TabContent>
           <TabContent show={activeTab === 'config'}>
-            { loggedIn ? userBox : null }
             <ConfigureStreamContainer />
           </TabContent>
         </div>
@@ -81,5 +75,5 @@ Embed.propTypes = {
   data: React.PropTypes.shape({
     loading: React.PropTypes.bool,
     error: React.PropTypes.object
-  }).isRequired,
+  }).isRequired
 };
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index be47b5c90..53f716954 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -1,22 +1,18 @@
 import React, {PropTypes} from 'react';
-
-import {Button} from 'coral-ui';
 import LoadMore from './LoadMore';
 import NewCount from './NewCount';
+
 import Comment from '../containers/Comment';
+import SuspendedAccount from './SuspendedAccount';
+import Slot from 'coral-framework/components/Slot';
 import InfoBox from 'coral-plugin-infobox/InfoBox';
+import {can} from 'coral-framework/services/perms';
+import I18n from 'coral-framework/modules/i18n/i18n';
 import {ModerationLink} from 'coral-plugin-moderation';
+import translations from 'coral-framework/translations';
 import CommentBox from 'coral-plugin-commentbox/CommentBox';
 import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
-import SuspendedAccount from './SuspendedAccount';
-import RestrictedMessageBox
-  from 'coral-framework/components/RestrictedMessageBox';
-import {can} from 'coral-framework/services/perms';
-import ChangeUsernameContainer
-  from 'coral-sign-in/containers/ChangeUsernameContainer';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-framework/translations';
 
 const lang = new I18n(translations);
 
@@ -55,7 +51,10 @@ class Stream extends React.Component {
       : comment;
 
     const banned = user && user.status === 'BANNED';
-    const temporarilySuspended = user && user.suspension.until && new Date(user.suspension.until) > new Date();
+    const temporarilySuspended =
+      user &&
+      user.suspension.until &&
+      new Date(user.suspension.until) > new Date();
 
     const hasOlderComments = !!(asset &&
       asset.lastComment &&
@@ -66,10 +65,15 @@ class Stream extends React.Component {
       ? asset.comments[0].created_at
       : new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString();
     const commentIsIgnored = (comment) => {
-      return me && me.ignoredUsers && me.ignoredUsers.find((u) => u.id === comment.user.id);
+      return (
+        me &&
+        me.ignoredUsers &&
+        me.ignoredUsers.find((u) => u.id === comment.user.id)
+      );
     };
     return (
       <div id="stream">
+        <Slot fill="stream" />
         {open
           ? <div id="commentBox">
               <InfoBox
@@ -80,52 +84,44 @@ class Stream extends React.Component {
                 content={asset.settings.questionBoxContent}
                 enable={asset.settings.questionBoxEnable}
               />
-              {!banned && temporarilySuspended &&
+              {!banned &&
+                temporarilySuspended &&
                 <RestrictedMessageBox>
-                  {
-                    lang.t('temporarilySuspended',
-                      this.props.root.settings.organizationName,
-                      lang.timeago(user.suspension.until),
-                    )
-                  }
-                </RestrictedMessageBox>
-              }
+                  {lang.t(
+                    'temporarilySuspended',
+                    this.props.root.settings.organizationName,
+                    lang.timeago(user.suspension.until)
+                  )}
+                </RestrictedMessageBox>}
               {banned &&
                 <SuspendedAccount
                   canEditName={user && user.canEditName}
                   editName={editName}
-                />
-              }
-              {loggedIn && !banned && !temporarilySuspended &&
+                />}
+              {loggedIn &&
+                !banned &&
+                !temporarilySuspended &&
                 <CommentBox
-                    addNotification={this.props.addNotification}
-                    postComment={this.props.postComment}
-                    appendItemArray={this.props.appendItemArray}
-                    updateItem={this.props.updateItem}
-                    setCommentCountCache={this.props.setCommentCountCache}
-                    commentCountCache={commentCountCache}
-                    assetId={asset.id}
-                    premod={asset.settings.moderation}
-                    isReply={false}
-                    authorId={user.id}
-                    charCountEnable={asset.settings.charCountEnable}
-                    maxCharCount={asset.settings.charCount}
-                  />
-              }
+                  addNotification={this.props.addNotification}
+                  postComment={this.props.postComment}
+                  appendItemArray={this.props.appendItemArray}
+                  updateItem={this.props.updateItem}
+                  setCommentCountCache={this.props.setCommentCountCache}
+                  commentCountCache={commentCountCache}
+                  assetId={asset.id}
+                  premod={asset.settings.moderation}
+                  isReply={false}
+                  authorId={user.id}
+                  charCountEnable={asset.settings.charCountEnable}
+                  maxCharCount={asset.settings.charCount}
+                />}
             </div>
           : <p>{asset.settings.closedMessage}</p>}
-        {!loggedIn &&
-          <Button
-            id="coralSignInButton"
-            onClick={this.props.showSignInDialog}
-            full
-          >
-            Sign in to comment
-          </Button>}
         {loggedIn &&
-          user &&
-          <ChangeUsernameContainer loggedIn={loggedIn} user={user} />}
-        {loggedIn && <ModerationLink assetId={asset.id} isAdmin={can(user, 'MODERATE_COMMENTS')} />}
+          <ModerationLink
+            assetId={asset.id}
+            isAdmin={can(user, 'MODERATE_COMMENTS')}
+          />}
 
         {/* the highlightedComment is isolated after the user followed a permalink */}
         {highlightedComment
@@ -163,41 +159,38 @@ class Stream extends React.Component {
                 setCommentCountCache={this.props.setCommentCountCache}
               />
               <div className="embed__stream">
-                {comments.map(
-                  (comment) => {
-                    return (commentIsIgnored(comment)
-                      ? <IgnoredCommentTombstone key={comment.id} />
-                      : <Comment
-                          data={this.props.data}
-                          root={this.props.root}
-                          disableReply={!open}
-                          setActiveReplyBox={this.setActiveReplyBox}
-                          activeReplyBox={this.props.activeReplyBox}
-                          addNotification={addNotification}
-                          depth={0}
-                          postComment={postComment}
-                          asset={asset}
-                          currentUser={user}
-                          postFlag={postFlag}
-                          postDontAgree={postDontAgree}
-                          addCommentTag={addCommentTag}
-                          removeCommentTag={removeCommentTag}
-                          ignoreUser={ignoreUser}
-                          commentIsIgnored={commentIsIgnored}
-                          loadMore={loadMore}
-                          deleteAction={deleteAction}
-                          showSignInDialog={showSignInDialog}
-                          key={comment.id}
-                          reactKey={comment.id}
-                          comment={comment}
-                          pluginProps={pluginProps}
-                          charCountEnable={asset.settings.charCountEnable}
-                          maxCharCount={asset.settings.charCount}
-                          editComment={this.props.editComment}
-                        />
-                    );
-                  }
-                )}
+                {comments.map((comment) => {
+                  return commentIsIgnored(comment)
+                    ? <IgnoredCommentTombstone key={comment.id} />
+                    : <Comment
+                        data={this.props.data}
+                        root={this.props.root}
+                        disableReply={!open}
+                        setActiveReplyBox={this.setActiveReplyBox}
+                        activeReplyBox={this.props.activeReplyBox}
+                        addNotification={addNotification}
+                        depth={0}
+                        postComment={postComment}
+                        asset={asset}
+                        currentUser={user}
+                        postFlag={postFlag}
+                        postDontAgree={postDontAgree}
+                        addCommentTag={addCommentTag}
+                        removeCommentTag={removeCommentTag}
+                        ignoreUser={ignoreUser}
+                        commentIsIgnored={commentIsIgnored}
+                        loadMore={loadMore}
+                        deleteAction={deleteAction}
+                        showSignInDialog={showSignInDialog}
+                        key={comment.id}
+                        reactKey={comment.id}
+                        comment={comment}
+                        pluginProps={pluginProps}
+                        charCountEnable={asset.settings.charCountEnable}
+                        maxCharCount={asset.settings.charCount}
+                        editComment={this.props.editComment}
+                      />;
+                })}
               </div>
               <LoadMore
                 topLevel={true}
@@ -226,7 +219,7 @@ Stream.propTypes = {
   ignoreUser: React.PropTypes.func,
 
   // edit a comment, passed (id, asset_id, { body })
-  editComment: React.PropTypes.func,
+  editComment: React.PropTypes.func
 };
 
 export default Stream;
diff --git a/client/coral-sign-in/components/FakeComment.js b/client/coral-sign-in/components/FakeComment.js
deleted file mode 100644
index 37630383d..000000000
--- a/client/coral-sign-in/components/FakeComment.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import styles from 'coral-embed-stream/src/components/Comment.css';
-
-import AuthorName from 'coral-plugin-author-name/AuthorName';
-import Content from 'coral-plugin-commentcontent/CommentContent';
-import PubDate from 'coral-plugin-pubdate/PubDate';
-import {ReplyButton} from 'coral-plugin-replies';
-
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations';
-
-const lang = new I18n(translations);
-
-class FakeComment extends React.Component {
-  constructor (props) {
-    super(props);
-  }
-
-  render () {
-    const {username, created_at, body} = this.props;
-
-    return (
-      <div
-        className={`comment ${styles.Comment}`}
-        style={{marginLeft: 0 * 30}}>
-        <hr aria-hidden={true} />
-        <AuthorName
-          author={{'name': username}}/>
-        <PubDate created_at={created_at} />
-        <Content body={body} />
-          <div className="commentActionsLeft comment__action-container">
-              <div className={`${'coral-plugin-likes'}-container`}>
-                <button className={'coral-plugin-likes-button'}>
-                  <span className={'coral-plugin-likes-button-text'}>{lang.t('like')}</span>
-                  <i className={`${'coral-plugin-likes'}-icon material-icons`}
-                    aria-hidden={true}>thumb_up</i>
-                </button>
-              </div>
-              <ReplyButton
-                onClick={() => {}}
-                parentCommentId={'commentID'}
-                currentUserId={{}}
-                banned={false}
-              />
-            </div>
-        <div className="commentActionsRight comment__action-container">
-          <div className="coral-plugin-permalinks-container">
-            <button className="coral-plugin-permalinks-button">
-              <span className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}>{lang.t('permalink.permalink')}</span>
-              <i className="coral-plugin-permalinks-icon material-icons" aria-hidden={true}>link</i>
-            </button>
-          </div>
-          <div className={`${'coral-plugin-flags'}-container`}>
-            <button className={`${'coral-plugin-flags'}-button`}>
-              <span className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}>{lang.t('report')}</span>
-              <i className={`${'coral-plugin-flags'}-icon material-icons`}
-                aria-hidden={true}>flag</i>
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default FakeComment;
diff --git a/client/coral-sign-in/components/UserBox.js b/client/coral-sign-in/components/UserBox.js
deleted file mode 100644
index a44c3d4fb..000000000
--- a/client/coral-sign-in/components/UserBox.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import styles from './styles.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations';
-const lang = new I18n(translations);
-
-const UserBox = ({className, user, onLogout, onShowProfile}) => (
-  <div className={`${styles.userBox} ${className ? className : ''}`}>
-    {lang.t('signIn.loggedInAs')}
-    <a onClick={onShowProfile}>{user.username}</a>. {lang.t('signIn.notYou')}
-    <a className={styles.logout} onClick={onLogout} id='logout'>{lang.t('signIn.logout')}</a>
-  </div>
-);
-
-export default UserBox;
diff --git a/client/coral-sign-in/containers/ChangeUsernameContainer.js b/client/coral-sign-in/containers/ChangeUsernameContainer.js
deleted file mode 100644
index cebd9605b..000000000
--- a/client/coral-sign-in/containers/ChangeUsernameContainer.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-
-import validate from 'coral-framework/helpers/validate';
-import errorMsj from 'coral-framework/helpers/error';
-
-import CreateUsernameDialog from '../components/CreateUsernameDialog';
-
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations';
-const lang = new I18n(translations);
-
-import {
-  showCreateUsernameDialog,
-  hideCreateUsernameDialog,
-  invalidForm,
-  validForm,
-  createUsername
-} from '../../coral-framework/actions/auth';
-
-class ChangeUsernameContainer extends Component {
-  initialState = {
-    formData: {
-      username: '',
-    },
-    errors: {},
-    showErrors: false
-  };
-
-  constructor(props) {
-    super(props);
-    this.initialState.formData.username = props.user.username;
-    this.state = this.initialState;
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmitUsername = this.handleSubmitUsername.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-    this.addError = this.addError.bind(this);
-  }
-
-  handleChange(e) {
-    const {name, value} = e.target;
-    this.setState((state) => ({
-      ...state,
-      formData: {
-        ...state.formData,
-        [name]: value
-      }
-    }), () => {
-      this.validation(name, value);
-    });
-  }
-
-  addError(name, error) {
-    return this.setState((state) => ({
-      errors: {
-        ...state.errors,
-        [name]: error
-      }
-    }));
-  }
-
-  validation(name, value) {
-    const {addError} = this;
-
-    if (!value.length) {
-      addError(name, lang.t('createdisplay.requiredField'));
-    } else if (!validate[name](value)) {
-      addError(name, errorMsj[name]);
-    } else {
-      const { [name]: prop, ...errors } = this.state.errors; // eslint-disable-line
-      // Removes Error
-      this.setState((state) => ({...state, errors}));
-    }
-  }
-
-  isCompleted() {
-    const {formData} = this.state;
-    return !Object.keys(formData).filter((prop) => !formData[prop].length).length;
-  }
-
-  displayErrors(show = true) {
-    this.setState({showErrors: show});
-  }
-
-  handleSubmitUsername(e) {
-    e.preventDefault();
-    const {errors} = this.state;
-    const {validForm, invalidForm} = this.props;
-    this.displayErrors();
-    if (this.isCompleted() && !Object.keys(errors).length) {
-      this.props.createUsername(this.props.user.id, this.state.formData);
-      validForm();
-    } else {
-      invalidForm(lang.t('createdisplay.checkTheForm'));
-    }
-  }
-
-  handleClose() {
-    this.props.hideCreateUsernameDialog();
-  }
-
-  render() {
-    const {loggedIn, auth} = this.props;
-    return (
-      <div>
-        <CreateUsernameDialog
-          open={auth.showCreateUsernameDialog}
-          handleClose={this.handleClose}
-          loggedIn={loggedIn}
-          handleSubmitUsername={this.handleSubmitUsername}
-          {...this}
-          {...this.state}
-          {...this.props}
-        />
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = (state) => ({
-  auth: state.auth.toJS()
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  createUsername: (userid, formData) => dispatch(createUsername(userid, formData)),
-  showCreateUsernameDialog: () => dispatch(showCreateUsernameDialog()),
-  hideCreateUsernameDialog: () => dispatch(hideCreateUsernameDialog()),
-  invalidForm: (error) => dispatch(invalidForm(error)),
-  validForm: () => dispatch(validForm())
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ChangeUsernameContainer);
diff --git a/client/coral-sign-in/containers/LoginContainer.js b/client/coral-sign-in/containers/LoginContainer.js
new file mode 100644
index 000000000..8d19e5198
--- /dev/null
+++ b/client/coral-sign-in/containers/LoginContainer.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import Slot from 'coral-framework/components/Slot';
+
+export const LoginContainer = () => (
+  <Slot fill="login"/>
+);
diff --git a/plugins/coral-plugin-auth/client/.babelrc b/plugins/coral-plugin-auth/client/.babelrc
new file mode 100644
index 000000000..60be246eb
--- /dev/null
+++ b/plugins/coral-plugin-auth/client/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/coral-plugin-auth/client/.eslintrc.json b/plugins/coral-plugin-auth/client/.eslintrc.json
new file mode 100644
index 000000000..9fe56bd14
--- /dev/null
+++ b/plugins/coral-plugin-auth/client/.eslintrc.json
@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}
diff --git a/plugins/coral-plugin-auth/client/components/ChangeUsername.js b/plugins/coral-plugin-auth/client/components/ChangeUsername.js
new file mode 100644
index 000000000..9b0cbb1a6
--- /dev/null
+++ b/plugins/coral-plugin-auth/client/components/ChangeUsername.js
@@ -0,0 +1,132 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import translations from '../translations';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import errorMsj from 'coral-framework/helpers/error';
+import validate from 'coral-framework/helpers/validate';
+import CreateUsernameDialog from './CreateUsernameDialog';
+
+const lang = new I18n(translations);
+
+import {
+  showCreateUsernameDialog,
+  hideCreateUsernameDialog,
+  invalidForm,
+  validForm,
+  createUsername
+} from 'coral-framework/actions/auth';
+
+class ChangeUsernameContainer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      formData: {
+        username: props.user.username
+      },
+      errors: {},
+      showErrors: false
+    };
+  }
+
+  handleChange = e => {
+    const {name, value} = e.target;
+    this.setState(
+      state => ({
+        ...state,
+        formData: {
+          ...state.formData,
+          [name]: value
+        }
+      }),
+      () => {
+        this.validation(name, value);
+      }
+    );
+  };
+
+  addError = (name, error) => {
+    return this.setState(state => ({
+      errors: {
+        ...state.errors,
+        [name]: error
+      }
+    }));
+  };
+
+  validation = (name, value) => {
+    const {addError} = this;
+
+    if (!value.length) {
+      addError(name, lang.t('createdisplay.requiredField'));
+    } else if (!validate[name](value)) {
+      addError(name, errorMsj[name]);
+    } else {
+      const {[name]: prop, ...errors} = this.state.errors; // eslint-disable-line
+      // Removes Error
+      this.setState(state => ({...state, errors}));
+    }
+  };
+
+  isCompleted = () => {
+    const {formData} = this.state;
+    return !Object.keys(formData).filter(prop => !formData[prop].length).length;
+  };
+
+  displayErrors = (show = true) => {
+    this.setState({showErrors: show});
+  };
+
+  handleSubmitUsername = e => {
+    e.preventDefault();
+    const {errors} = this.state;
+    const {validForm, invalidForm} = this.props;
+    this.displayErrors();
+    if (this.isCompleted() && !Object.keys(errors).length) {
+      this.props.createUsername(this.props.user.id, this.state.formData);
+      validForm();
+    } else {
+      invalidForm(lang.t('createdisplay.checkTheForm'));
+    }
+  };
+
+  handleClose = () => {
+    this.props.hideCreateUsernameDialog();
+  };
+
+  render() {
+    const {loggedIn, auth} = this.props;
+    return (
+      <div>
+        <CreateUsernameDialog
+          open={auth.showCreateUsernameDialog && auth.user.canEditName}
+          handleClose={this.handleClose}
+          loggedIn={loggedIn}
+          handleSubmitUsername={this.handleSubmitUsername}
+          {...this}
+          {...this.state}
+          {...this.props}
+        />
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = ({auth, user}) => ({auth, user});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      createUsername,
+      showCreateUsernameDialog,
+      hideCreateUsernameDialog,
+      invalidForm,
+      validForm
+    },
+    dispatch
+  );
+
+export default connect(mapStateToProps, mapDispatchToProps)(
+  ChangeUsernameContainer
+);
diff --git a/client/coral-sign-in/components/CreateUsernameDialog.js b/plugins/coral-plugin-auth/client/components/CreateUsernameDialog.js
similarity index 61%
rename from client/coral-sign-in/components/CreateUsernameDialog.js
rename to plugins/coral-plugin-auth/client/components/CreateUsernameDialog.js
index b94b47c42..c352552ae 100644
--- a/client/coral-sign-in/components/CreateUsernameDialog.js
+++ b/plugins/coral-plugin-auth/client/components/CreateUsernameDialog.js
@@ -1,21 +1,26 @@
 import React from 'react';
-import TextField from 'coral-ui/components/TextField';
-import Button from 'coral-ui/components/Button';
-import {Dialog, Alert} from 'coral-ui';
-import FakeComment from './FakeComment';
-
 import styles from './styles.css';
-
-import I18n from 'coral-framework/modules/i18n/i18n';
+import {Dialog, Alert, TextField} from 'coral-ui';
+import {FakeComment} from './FakeComment';
 import translations from '../translations';
+import Button from 'coral-ui/components/Button';
+import I18n from 'coral-framework/modules/i18n/i18n';
+
 const lang = new I18n(translations);
 
-const CreateUsernameDialog = ({open, handleClose, formData, handleSubmitUsername, handleChange, ...props}) => {
-  return (
+const CreateUsernameDialog = ({
+  open,
+  handleClose,
+  formData,
+  handleSubmitUsername,
+  handleChange,
+  ...props
+}) => (
   <Dialog
     className={styles.dialogusername}
     id="createUsernameDialog"
-    open={open}>
+    open={open}
+  >
     <span className={styles.close} onClick={handleClose}>×</span>
     <div>
       <div className={styles.header}>
@@ -24,17 +29,24 @@ const CreateUsernameDialog = ({open, handleClose, formData, handleSubmitUsername
         </h1>
       </div>
       <div>
-        <p className={styles.yourusername}>{lang.t('createdisplay.yourusername')}</p>
+        <p className={styles.yourusername}>
+          {lang.t('createdisplay.yourusername')}
+        </p>
         <FakeComment
           className={styles.fakeComment}
           username={formData.username}
           created_at={Date.now()}
           body={lang.t('createdisplay.fakecommentbody')}
         />
-        <p className={styles.ifyoudont}>{lang.t('createdisplay.ifyoudontchangeyourname')}</p>
-        { props.auth.error && <Alert>{props.auth.error}</Alert> }
+        <p className={styles.ifyoudont}>
+          {lang.t('createdisplay.ifyoudontchangeyourname')}
+        </p>
+        {props.auth.error && <Alert>{props.auth.error}</Alert>}
         <form id="saveUsername" onSubmit={handleSubmitUsername}>
-          { props.errors.username && <span className={styles.hint}> {lang.t('createdisplay.specialCharacters')} </span> }
+          {props.errors.username &&
+            <span className={styles.hint}>
+              {' '}{lang.t('createdisplay.specialCharacters')}{' '}
+            </span>}
           <div className={styles.saveusername}>
             <TextField
               id="username"
@@ -44,13 +56,14 @@ const CreateUsernameDialog = ({open, handleClose, formData, handleSubmitUsername
               value={formData.username}
               onChange={handleChange}
             />
-            <Button id="save" type="submit" className={styles.saveButton}>{lang.t('createdisplay.save')}</Button>
+            <Button id="save" type="submit" className={styles.saveButton}>
+              {lang.t('createdisplay.save')}
+            </Button>
           </div>
-      </form>
+        </form>
       </div>
     </div>
   </Dialog>
-  );
-};
+);
 
 export default CreateUsernameDialog;
diff --git a/plugins/coral-plugin-auth/client/components/FakeComment.js b/plugins/coral-plugin-auth/client/components/FakeComment.js
new file mode 100644
index 000000000..01cc6863e
--- /dev/null
+++ b/plugins/coral-plugin-auth/client/components/FakeComment.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import translations from '../translations';
+import {ReplyButton} from 'coral-plugin-replies';
+import PubDate from 'coral-plugin-pubdate/PubDate';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import AuthorName from 'coral-plugin-author-name/AuthorName';
+import Content from 'coral-plugin-commentcontent/CommentContent';
+import styles from 'coral-embed-stream/src/components/Comment.css';
+
+const lang = new I18n(translations);
+
+export const FakeComment = ({username, created_at, body}) => (
+  <div className={`comment ${styles.Comment}`} style={{marginLeft: 0 * 30}}>
+    <hr aria-hidden={true} />
+    <AuthorName author={{name: username}} />
+    <PubDate created_at={created_at} />
+    <Content body={body} />
+    <div className="commentActionsLeft comment__action-container">
+      <div className={`${'coral-plugin-likes'}-container`}>
+        <button className={'coral-plugin-likes-button'}>
+          <span className={'coral-plugin-likes-button-text'}>
+            {lang.t('like')}
+          </span>
+          <i
+            className={`${'coral-plugin-likes'}-icon material-icons`}
+            aria-hidden={true}
+          >
+            thumb_up
+          </i>
+        </button>
+      </div>
+      <ReplyButton
+        onClick={() => {}}
+        parentCommentId={'commentID'}
+        currentUserId={{}}
+        banned={false}
+      />
+    </div>
+    <div className="commentActionsRight comment__action-container">
+      <div className="coral-plugin-permalinks-container">
+        <button className="coral-plugin-permalinks-button">
+          <span
+            className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}
+          >
+            {lang.t('permalink.permalink')}
+          </span>
+          <i
+            className="coral-plugin-permalinks-icon material-icons"
+            aria-hidden={true}
+          >
+            link
+          </i>
+        </button>
+      </div>
+      <div className={`${'coral-plugin-flags'}-container`}>
+        <button className={`${'coral-plugin-flags'}-button`}>
+          <span
+            className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}
+          >
+            {lang.t('report')}
+          </span>
+          <i
+            className={`${'coral-plugin-flags'}-icon material-icons`}
+            aria-hidden={true}
+          >
+            flag
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+);
\ No newline at end of file
diff --git a/client/coral-sign-in/components/ForgotContent.js b/plugins/coral-plugin-auth/client/components/ForgotContent.js
similarity index 50%
rename from client/coral-sign-in/components/ForgotContent.js
rename to plugins/coral-plugin-auth/client/components/ForgotContent.js
index 76246fa00..2099330bc 100644
--- a/client/coral-sign-in/components/ForgotContent.js
+++ b/plugins/coral-plugin-auth/client/components/ForgotContent.js
@@ -1,22 +1,18 @@
 import React from 'react';
 import styles from './styles.css';
+import translations from '../translations';
 import Button from 'coral-ui/components/Button';
 import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations';
+
 const lang = new I18n(translations);
 
 class ForgotContent extends React.Component {
-  constructor (props) {
-    super(props);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  handleSubmit (e) {
+  handleSubmit = e => {
     e.preventDefault();
     this.props.fetchForgotPassword(this.emailInput.value);
-  }
+  };
 
-  render () {
+  render() {
     const {changeView, auth} = this.props;
     const {passwordRequestSuccess, passwordRequestFailure} = auth;
 
@@ -29,29 +25,47 @@ class ForgotContent extends React.Component {
           <div className={styles.textField}>
             <label htmlFor="email">{lang.t('signIn.email')}</label>
             <input
-              ref={(input) => this.emailInput = input}
+              ref={input => (this.emailInput = input)}
               type="text"
               style={{fontSize: 16}}
               id="email"
-              name="email" />
+              name="email"
+            />
           </div>
-          <Button type="submit" cStyle="black" className={styles.signInButton} full>
+          <Button
+            type="submit"
+            cStyle="black"
+            className={styles.signInButton}
+            full
+          >
             {lang.t('signIn.recoverPassword')}
           </Button>
-          {
-            passwordRequestSuccess
-            ? <p className={styles.passwordRequestSuccess}>{passwordRequestSuccess}</p>
-            : null
-          }
-          {
-            passwordRequestFailure
-            ? <p className={styles.passwordRequestFailure}>{passwordRequestFailure}</p>
-            : null
-          }
+          {passwordRequestSuccess
+            ? <p className={styles.passwordRequestSuccess}>
+                {passwordRequestSuccess}
+              </p>
+            : null}
+          {passwordRequestFailure
+            ? <p className={styles.passwordRequestFailure}>
+                {passwordRequestFailure}
+              </p>
+            : null}
         </form>
         <div className={styles.footer}>
-          <span>{lang.t('signIn.needAnAccount')} <a onClick={() => changeView('SIGNUP')}>{lang.t('signIn.register')}</a></span>
-          <span>{lang.t('signIn.alreadyHaveAnAccount')} <a onClick={() => changeView('SIGNIN')}>{lang.t('signIn.signIn')}</a></span>
+          <span>
+            {lang.t('signIn.needAnAccount')}
+            {' '}
+            <a onClick={() => changeView('SIGNUP')}>
+              {lang.t('signIn.register')}
+            </a>
+          </span>
+          <span>
+            {lang.t('signIn.alreadyHaveAnAccount')}
+            {' '}
+            <a onClick={() => changeView('SIGNIN')}>
+              {lang.t('signIn.signIn')}
+            </a>
+          </span>
         </div>
       </div>
     );
diff --git a/client/coral-sign-in/components/SignDialog.js b/plugins/coral-plugin-auth/client/components/SignDialog.js
similarity index 68%
rename from client/coral-sign-in/components/SignDialog.js
rename to plugins/coral-plugin-auth/client/components/SignDialog.js
index ff2464f7c..7f05889a0 100644
--- a/client/coral-sign-in/components/SignDialog.js
+++ b/plugins/coral-plugin-auth/client/components/SignDialog.js
@@ -6,12 +6,9 @@ import SignInContent from './SignInContent';
 import SignUpContent from './SignUpContent';
 import ForgotContent from './ForgotContent';
 
-const SignDialog = ({open, view, handleClose, ...props}) => (
-  <Dialog
-    className={styles.dialog}
-    id="signInDialog"
-    open={open}>
-    <span className={styles.close} onClick={handleClose}>×</span>
+const SignDialog = ({open, view, hideSignInDialog, ...props}) => (
+  <Dialog className={styles.dialog} id="signInDialog" open={open}>
+    <span className={styles.close} onClick={hideSignInDialog}>×</span>
     {view === 'SIGNIN' && <SignInContent {...props} />}
     {view === 'SIGNUP' && <SignUpContent {...props} />}
     {view === 'FORGOT' && <ForgotContent {...props} />}
diff --git a/plugins/coral-plugin-auth/client/components/SignInButton.js b/plugins/coral-plugin-auth/client/components/SignInButton.js
new file mode 100644
index 000000000..b54cbfedd
--- /dev/null
+++ b/plugins/coral-plugin-auth/client/components/SignInButton.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import {Button} from 'coral-ui';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {showSignInDialog} from 'coral-framework/actions/auth';
+
+const SignInButton = ({loggedIn, showSignInDialog}) => (
+  <div>
+    {!loggedIn
+      ? <Button id="coralSignInButton" onClick={showSignInDialog} full>
+          Sign in to comment
+        </Button>
+      : null}
+  </div>
+);
+
+const mapStateToProps = ({auth}) => ({
+  loggedIn: auth.toJS().loggedIn
+});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({showSignInDialog}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(SignInButton);
diff --git a/client/coral-sign-in/containers/SignInContainer.js b/plugins/coral-plugin-auth/client/components/SignInContainer.js
similarity index 56%
rename from client/coral-sign-in/containers/SignInContainer.js
rename to plugins/coral-plugin-auth/client/components/SignInContainer.js
index de1d2086e..cbff000ee 100644
--- a/client/coral-sign-in/containers/SignInContainer.js
+++ b/plugins/coral-plugin-auth/client/components/SignInContainer.js
@@ -1,11 +1,13 @@
-import React, {Component, PropTypes} from 'react';
+import React from 'react';
 import {connect} from 'react-redux';
-import SignDialog from '../components/SignDialog';
-import validate from 'coral-framework/helpers/validate';
-import errorMsj from 'coral-framework/helpers/error';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations';
 import {pym} from 'coral-framework';
+import SignDialog from './SignDialog';
+import {bindActionCreators} from 'redux';
+import translations from '../translations';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import errorMsj from 'coral-framework/helpers/error';
+import validate from 'coral-framework/helpers/validate';
+
 const lang = new I18n(translations);
 
 import {
@@ -23,34 +25,22 @@ import {
   checkLogin
 } from 'coral-framework/actions/auth';
 
-class SignInContainer extends Component {
-  initialState = {
-    formData: {
-      email: '',
-      username: '',
-      password: '',
-      confirmPassword: ''
-    },
-    emailToBeResent: '',
-    errors: {},
-    showErrors: false
-  };
-
+class SignInContainer extends React.Component {
   constructor(props) {
     super(props);
-    this.state = this.initialState;
-    this.addError = this.addError.bind(this);
-    this.handleAuth = this.handleAuth.bind(this);
-    this.handleSignUp = this.handleSignUp.bind(this);
-    this.handleSignIn = this.handleSignIn.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleChangeEmail = this.handleChangeEmail.bind(this);
-    this.handleResendVerification = this.handleResendVerification.bind(this);
-  }
 
-  static propTypes = {
-    requireEmailConfirmation: PropTypes.bool.isRequired
-  };
+    this.state = {
+      formData: {
+        email: '',
+        username: '',
+        password: '',
+        confirmPassword: ''
+      },
+      emailToBeResent: '',
+      errors: {},
+      showErrors: false
+    };
+  }
 
   componentWillMount() {
     this.props.checkLogin();
@@ -71,8 +61,7 @@ class SignInContainer extends Component {
     window.removeEventListener('storage', this.handleAuth);
   }
 
-  handleAuth(e) {
-
+  handleAuth = e => {
     // Listening to FB changes
     // FB localStorage key is 'auth'
     const authCallback = this.props.facebookCallback;
@@ -81,12 +70,12 @@ class SignInContainer extends Component {
       const {err, data} = JSON.parse(e.newValue);
       authCallback(err, data);
     }
-  }
+  };
 
-  handleChange(e) {
+  handleChange = e => {
     const {name, value} = e.target;
     this.setState(
-      (state) => ({
+      state => ({
         ...state,
         formData: {
           ...state.formData,
@@ -97,14 +86,14 @@ class SignInContainer extends Component {
         this.validation(name, value);
       }
     );
-  }
+  };
 
-  handleChangeEmail(e) {
+  handleChangeEmail = e => {
     const {value} = e.target;
     this.setState({emailToBeResent: value});
-  }
+  };
 
-  handleResendVerification(e) {
+  handleResendVerification = e => {
     e.preventDefault();
     this.props
       .requestConfirmEmail(
@@ -113,23 +102,22 @@ class SignInContainer extends Component {
       )
       .then(() => {
         setTimeout(() => {
-
           // allow success UI to be shown for a second, and then close the modal
-          this.props.handleClose();
+          this.props.hideSignInDialog();
         }, 2500);
       });
-  }
+  };
 
-  addError(name, error) {
-    return this.setState((state) => ({
+  addError = (name, error) => {
+    return this.setState(state => ({
       errors: {
         ...state.errors,
         [name]: error
       }
     }));
-  }
+  };
 
-  validation(name, value) {
+  validation = (name, value) => {
     const {addError} = this;
     const {formData} = this.state;
 
@@ -145,20 +133,20 @@ class SignInContainer extends Component {
     } else {
       const {[name]: prop, ...errors} = this.state.errors; // eslint-disable-line
       // Removes Error
-      this.setState((state) => ({...state, errors}));
+      this.setState(state => ({...state, errors}));
     }
-  }
+  };
 
-  isCompleted() {
+  isCompleted = () => {
     const {formData} = this.state;
-    return !Object.keys(formData).filter((prop) => !formData[prop].length).length;
-  }
+    return !Object.keys(formData).filter(prop => !formData[prop].length).length;
+  };
 
-  displayErrors(show = true) {
+  displayErrors = (show = true) => {
     this.setState({showErrors: show});
-  }
+  };
 
-  handleSignUp(e) {
+  handleSignUp = e => {
     e.preventDefault();
     const {errors} = this.state;
     const {fetchSignUp, validForm, invalidForm} = this.props;
@@ -169,52 +157,54 @@ class SignInContainer extends Component {
     } else {
       invalidForm(lang.t('signIn.checkTheForm'));
     }
-  }
+  };
 
-  handleSignIn(e) {
+  handleSignIn = e => {
     e.preventDefault();
     this.props.fetchSignIn(this.state.formData);
-  }
+  };
 
   render() {
     const {auth, requireEmailConfirmation} = this.props;
     const {emailVerificationLoading, emailVerificationSuccess} = auth;
 
     return (
-      <div>
-        <SignDialog
-          open={true}
-          view={auth.view}
-          emailVerificationEnabled={requireEmailConfirmation}
-          emailVerificationLoading={emailVerificationLoading}
-          emailVerificationSuccess={emailVerificationSuccess}
-          {...this}
-          {...this.state}
-          {...this.props}
-        />
-      </div>
+      <SignDialog
+        open={true}
+        view={auth.view}
+        emailVerificationEnabled={requireEmailConfirmation}
+        emailVerificationLoading={emailVerificationLoading}
+        emailVerificationSuccess={emailVerificationSuccess}
+        {...this}
+        {...this.state}
+        {...this.props}
+      />
     );
   }
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   auth: state.auth.toJS()
 });
 
-const mapDispatchToProps = (dispatch) => ({
-  checkLogin: () => dispatch(checkLogin()),
-  facebookCallback: (err, data) => dispatch(facebookCallback(err, data)),
-  fetchSignUp: (formData, url) => dispatch(fetchSignUp(formData, url)),
-  fetchSignIn: (formData) => dispatch(fetchSignIn(formData)),
-  fetchSignInFacebook: () => dispatch(fetchSignInFacebook()),
-  fetchSignUpFacebook: () => dispatch(fetchSignUpFacebook()),
-  fetchForgotPassword: (formData) => dispatch(fetchForgotPassword(formData)),
-  requestConfirmEmail: (email, url) =>
-    dispatch(requestConfirmEmail(email, url)),
-  changeView: (view) => dispatch(changeView(view)),
-  handleClose: () => dispatch(hideSignInDialog()),
-  invalidForm: (error) => dispatch(invalidForm(error)),
-  validForm: () => dispatch(validForm())
-});
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      checkLogin,
+      facebookCallback,
+      fetchSignUp,
+      fetchSignUp,
+      fetchSignIn,
+      fetchSignInFacebook,
+      fetchSignUpFacebook,
+      fetchForgotPassword,
+      requestConfirmEmail,
+      changeView,
+      hideSignInDialog,
+      invalidForm,
+      validForm
+    },
+    dispatch
+  );
 
 export default connect(mapStateToProps, mapDispatchToProps)(SignInContainer);
diff --git a/client/coral-sign-in/components/SignInContent.js b/plugins/coral-plugin-auth/client/components/SignInContent.js
similarity index 74%
rename from client/coral-sign-in/components/SignInContent.js
rename to plugins/coral-plugin-auth/client/components/SignInContent.js
index 7460efb97..6f0027084 100644
--- a/client/coral-sign-in/components/SignInContent.js
+++ b/plugins/coral-plugin-auth/client/components/SignInContent.js
@@ -18,17 +18,17 @@ const SignInContent = ({
   auth,
   fetchSignInFacebook
 }) => {
-
   return (
     <div className="coral-sign-in">
       <div className={`${styles.header} header`}>
         <h1>
-          {auth.emailVerificationFailure ? lang.t('signIn.emailVerifyCTA') : lang.t('signIn.signIn')}
+          {auth.emailVerificationFailure
+            ? lang.t('signIn.emailVerifyCTA')
+            : lang.t('signIn.signIn')}
         </h1>
       </div>
-      { auth.error && <Alert>{auth.error}</Alert> }
-      {
-        auth.emailVerificationFailure
+      {auth.error && <Alert>{auth.error}</Alert>}
+      {auth.emailVerificationFailure
         ? <form onSubmit={handleResendVerification}>
             <p>{lang.t('signIn.requestNewVerifyEmail')}</p>
             <TextField
@@ -36,8 +36,11 @@ const SignInContent = ({
               type="email"
               label={lang.t('signIn.email')}
               value={emailToBeResent}
-              onChange={handleChangeEmail} />
-            <Button id='resendConfirmEmail' type='submit' cStyle='black' full>Send Email</Button>
+              onChange={handleChangeEmail}
+            />
+            <Button id="resendConfirmEmail" type="submit" cStyle="black" full>
+              Send Email
+            </Button>
             {emailVerificationLoading && <Spinner />}
             {emailVerificationSuccess && <Success />}
           </form>
@@ -70,23 +73,29 @@ const SignInContent = ({
                 onChange={handleChange}
               />
               <div className={styles.action}>
-                {
-                  !auth.isLoading ?
-                  <Button id='coralLogInButton' type="submit" cStyle="black" className={styles.signInButton} full>
-                    {lang.t('signIn.signIn')}
-                  </Button>
-                  :
-                  <Spinner />
-                }
+                {!auth.isLoading
+                  ? <Button
+                      id="coralLogInButton"
+                      type="submit"
+                      cStyle="black"
+                      className={styles.signInButton}
+                      full
+                    >
+                      {lang.t('signIn.signIn')}
+                    </Button>
+                  : <Spinner />}
               </div>
             </form>
-          </div>
-      }
+          </div>}
       <div className={`${styles.footer} footer`}>
-        <span><a onClick={() => changeView('FORGOT')}>{lang.t('signIn.forgotYourPass')}</a></span>
+        <span>
+          <a onClick={() => changeView('FORGOT')}>
+            {lang.t('signIn.forgotYourPass')}
+          </a>
+        </span>
         <span>
           {lang.t('signIn.needAnAccount')}
-          <a onClick={() => changeView('SIGNUP')} id='coralRegister'>
+          <a onClick={() => changeView('SIGNUP')} id="coralRegister">
             {lang.t('signIn.register')}
           </a>
         </span>
diff --git a/client/coral-sign-in/components/SignUpContent.js b/plugins/coral-plugin-auth/client/components/SignUpContent.js
similarity index 66%
rename from client/coral-sign-in/components/SignUpContent.js
rename to plugins/coral-plugin-auth/client/components/SignUpContent.js
index 921f045be..5f2dd36ea 100644
--- a/client/coral-sign-in/components/SignUpContent.js
+++ b/plugins/coral-plugin-auth/client/components/SignUpContent.js
@@ -1,39 +1,21 @@
-import React, {PropTypes} from 'react';
-import {Button, TextField, Spinner, Success, Alert} from 'coral-ui';
 import styles from './styles.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
+import React, {PropTypes} from 'react';
 import translations from '../translations';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import {Button, TextField, Spinner, Success, Alert} from 'coral-ui';
+
 const lang = new I18n(translations);
 
 class SignUpContent extends React.Component {
+  constructor() {
+    super();
 
-  constructor (props) {
-    super(props);
-    this.successfulSignup = false;
+    this.state = {
+      successfulSignup: false
+    };
   }
 
-  static propTypes = {
-    emailVerificationEnabled: PropTypes.bool.isRequired,
-    fetchSignUpFacebook: PropTypes.func.isRequired,
-    changeView: PropTypes.func.isRequired,
-    handleSignUp: PropTypes.func.isRequired,
-    showErrors: PropTypes.bool,
-    errors: PropTypes.shape({
-      email: PropTypes.string,
-      username: PropTypes.string,
-      password: PropTypes.string,
-      confirmPassword: PropTypes.string,
-    }),
-    formData: PropTypes.shape({
-      email: PropTypes.string,
-      username: PropTypes.string,
-      password: PropTypes.string,
-      confirmPassword: PropTypes.string
-    })
-  }
-
-  render () {
-
+  render() {
     const {
       handleChange,
       formData,
@@ -43,17 +25,20 @@ class SignUpContent extends React.Component {
       showErrors,
       changeView,
       handleSignUp,
-      fetchSignUpFacebook} = this.props;
+      fetchSignUpFacebook
+    } = this.props;
 
     const beforeSignup = !auth.isLoading && !auth.successSignUp;
     const successfulSignup = !auth.isLoading && auth.successSignUp;
 
     // the first time we render a successfulSignup, trigger a timer
-    if ((this.successfulSignup ^ successfulSignup) && !emailVerificationEnabled) {
+    if (this.successfulSignup ^ successfulSignup && !emailVerificationEnabled) {
       setTimeout(() => {
         changeView('SIGNIN');
       }, 1000);
-      this.successfulSignup = true;
+      this.setState({
+        successfulSignup: true
+      });
     }
 
     return (
@@ -64,8 +49,8 @@ class SignUpContent extends React.Component {
           </h1>
         </div>
 
-        { auth.error && <Alert>{auth.error}</Alert> }
-        { beforeSignup &&
+        {auth.error && <Alert>{auth.error}</Alert>}
+        {beforeSignup &&
           <div>
             <div className={styles.socialConnections}>
               <Button cStyle="facebook" onClick={fetchSignUpFacebook} full>
@@ -109,7 +94,10 @@ class SignUpContent extends React.Component {
                 onChange={handleChange}
                 minLength="8"
               />
-              { errors.password && <span className={styles.hint}> Password must be at least 8 characters. </span> }
+              {errors.password &&
+                <span className={styles.hint}>
+                  {' '}Password must be at least 8 characters.{' '}
+                </span>}
               <TextField
                 id="confirmPassword"
                 type="password"
@@ -122,26 +110,35 @@ class SignUpContent extends React.Component {
                 minLength="8"
               />
               <div className={styles.action}>
-                <Button type="submit" cStyle="black" id='coralSignUpButton' className={styles.signInButton} full>
+                <Button
+                  type="submit"
+                  cStyle="black"
+                  id="coralSignUpButton"
+                  className={styles.signInButton}
+                  full
+                >
                   {lang.t('signIn.signUp')}
                 </Button>
-                { auth.isLoading && <Spinner /> }
+                {auth.isLoading && <Spinner />}
               </div>
             </form>
-          </div>
-        }
-        {
-          successfulSignup &&
+          </div>}
+        {successfulSignup &&
           <div>
             <Success />
-            {
-              emailVerificationEnabled &&
-              <p>{lang.t('signIn.verifyEmail')}<br /><br />{lang.t('signIn.verifyEmail2')}</p>
-            }
-          </div>
-        }
+            {emailVerificationEnabled &&
+              <p>
+                {lang.t('signIn.verifyEmail')}
+                <br />
+                <br />
+                {lang.t('signIn.verifyEmail2')}
+              </p>}
+          </div>}
         <div className={styles.footer}>
-          {lang.t('signIn.alreadyHaveAnAccount')} <a id="coralSignInViewTrigger" onClick={() => changeView('SIGNIN')}>
+          {lang.t('signIn.alreadyHaveAnAccount')} <a
+            id="coralSignInViewTrigger"
+            onClick={() => changeView('SIGNIN')}
+          >
             {lang.t('signIn.signIn')}
           </a>
         </div>
diff --git a/plugins/coral-plugin-auth/client/components/UserBox.js b/plugins/coral-plugin-auth/client/components/UserBox.js
new file mode 100644
index 000000000..a4a0e1c99
--- /dev/null
+++ b/plugins/coral-plugin-auth/client/components/UserBox.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import styles from './styles.css';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import translations from '../translations';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import {showSignInDialog, logout} from 'coral-framework/actions/auth';
+const lang = new I18n(translations);
+
+const UserBox = ({loggedIn, user, logout, onShowProfile}) => (
+  <div>
+    {
+      loggedIn ? (
+        <div className={styles.userBox}>
+          {lang.t('signIn.loggedInAs')}
+          <a onClick={onShowProfile}>{user.username}</a>. {lang.t('signIn.notYou')}
+          <a className={styles.logout} onClick={() => logout()}>
+            {lang.t('signIn.logout')}
+          </a>
+        </div>
+      ) : null
+    }
+  </div>
+);
+
+const mapStateToProps = ({auth, user}) => ({
+  loggedIn: auth.toJS().loggedIn,
+  user: user.toJS()
+});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({logout}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(UserBox);
diff --git a/client/coral-sign-in/components/styles.css b/plugins/coral-plugin-auth/client/components/styles.css
similarity index 100%
rename from client/coral-sign-in/components/styles.css
rename to plugins/coral-plugin-auth/client/components/styles.css
diff --git a/plugins/coral-plugin-auth/client/index.js b/plugins/coral-plugin-auth/client/index.js
new file mode 100644
index 000000000..41fa3adbe
--- /dev/null
+++ b/plugins/coral-plugin-auth/client/index.js
@@ -0,0 +1,11 @@
+import UserBox from './components/UserBox';
+import SignInButton from './components/SignInButton';
+import SignInContainer from './components/SignInContainer';
+import ChangeUserNameContainer from './components/ChangeUsername';
+
+export default {
+  slots: {
+    stream: [UserBox, SignInButton, ChangeUserNameContainer],
+    login: [SignInContainer]
+  }
+};
\ No newline at end of file
diff --git a/plugins/coral-plugin-auth/client/translations.json b/plugins/coral-plugin-auth/client/translations.json
new file mode 100644
index 000000000..7ae84b2ff
--- /dev/null
+++ b/plugins/coral-plugin-auth/client/translations.json
@@ -0,0 +1,102 @@
+{
+  "en": {
+    "signIn": {
+      "emailVerifyCTA": "Please verify your email address.",
+      "requestNewVerifyEmail": "Request another email:",
+      "verifyEmail": "Thank you for creating an account! We sent an email to the address you provided to verify your account.",
+      "verifyEmail2": "You must verify your account before engaging with the community.",
+      "notYou": "Not you?",
+      "loggedInAs": "Logged in as",
+      "facebookSignIn": "Sign in with Facebook",
+      "facebookSignUp": "Sign up with Facebook",
+      "logout": "Logout",
+      "signIn": "Sign in to join the conversation",
+      "or": "Or",
+      "email": "E-mail Address",
+      "password": "Password",
+      "forgotYourPass": "Forgot your password?",
+      "needAnAccount": "Need an account?",
+      "register": "Register",
+      "signUp": "Sign Up",
+      "confirmPassword": "Confirm Password",
+      "username": "Username",
+      "alreadyHaveAnAccount": "Already have an account?",
+      "recoverPassword": "Recover password",
+      "emailInUse": "Email address already in use",
+      "emailORusernameInUse": "Email address or Username already in use",
+      "requiredField": "This field is required",
+      "passwordsDontMatch": "Passwords don't match.",
+      "specialCharacters": "Usernames can contain letters, numbers and _ only",
+      "checkTheForm": "Invalid Form. Please, check the fields"
+    },
+    "createdisplay": {
+      "writeyourusername": "Edit your username",
+      "yourusername": "Your username appears on every comment you post.",
+      "ifyoudontchangeyourname": "If you don't change your username at this step, your Facebook display name will appear alongside of all your comments.",
+      "username": "Username",
+      "continue": "Continue with the same Facebook username",
+      "save": "Save",
+      "fakecommentdate": "1 minute ago",
+      "fakecommentbody": "This is an example comment. Readers can share their thoughts and opinions with newsrooms in the comments section.",
+      "requiredField": "Required field",
+      "errorCreate": "Error when changing username",
+      "checkTheForm": "Invalid Form. Please, check the fields",
+      "specialCharacters": "Usernames can contain letters, numbers and _ only"
+    },
+    "permalink": {
+      "permalink": "Link"
+    },
+    "report": "Report",
+    "like": "Like"
+  },
+  "es": {
+    "signIn": {
+      "emailVerifyCTA": "Por favor verifique su e-mail.",
+      "requestNewVerifyEmail": "Enviar otro correo:",
+      "verifyEmail": "¡Gracias por crear una cuenta! Le enviamos un correo a la dirección que dio para verificar su cuenta.",
+      "verifyEmail2": "Debe verificarla antes de poder involucrarse en la comunidad.",
+      "notYou": "¿No eres tu?",
+      "loggedInAs": "Entraste como",
+      "facebookSignIn": "Entrar con Facebook",
+      "facebookSignUp": "Regístrate con Facebook",
+      "logout": "Salir",
+      "signIn": "Entrar para Unirte a la Conversación",
+      "or": "o",
+      "email": "E-mail",
+      "password": "Contraseña",
+      "forgotYourPass": "¿Has olvidado tu contraseña?",
+      "needAnAccount": "¿Necesitas una cuenta?",
+      "register": "Regístrate",
+      "signUp": "Registro",
+      "confirmPassword": "Confirmar Contraseña",
+      "username": "Nombre",
+      "alreadyHaveAnAccount": "¿Ya tienes una cuenta?",
+      "recoverPassword": "Recuperar contraseña",
+      "emailInUse": "Este e-mail se encuentra en uso",
+      "emailORusernameInUse": "Este e-mail ó nombre de usuario se encuentran en uso",
+      "requiredField": "Este campo es requerido",
+      "passwordsDontMatch": "Las contraseñas no coinciden",
+      "specialCharacters": "Los nombres pueden contener letras, números y _",
+      "checkTheForm": "Formulario Inválido. Por favor, completa los campos"
+    },
+    "createdisplay": {
+      "writeyourusername": "Edita tu nombre",
+      "yourusername": "Tu nombre aparece en cada comentario que publiques.",
+      "ifyoudontchangeyourname": "Si no modificas tu nombre de usuario en este paso, tu nombre de Facebook aparecera al lado de cada comentario que publiques.",
+      "username": "Nombre",
+      "continue": "Continuar con nombre de Facebook",
+      "save": "Guardar",
+      "fakecommentdate": "hace un minuto",
+      "fakecommentbody": "Este es un comentario de ejemplo. Las lectoras pueden compartir sus ideas  y opiniones con los periodistas en la sección de comentarios.",
+      "requiredField": "Campo necesario",
+      "errorCreate": "Hubo un error al cambiar el nombre de usuario",
+      "checkTheForm": "Formulario Inválido. Por favor, verifica los campos",
+      "specialCharacters": "Sólo pueden contener letras, números y _"
+    },
+    "permalink": {
+      "permalink": "Enlace"
+    },
+    "report": "Marcar",
+    "like": "Me gusta"
+  }
+}
diff --git a/plugins/coral-plugin-auth/index.js b/plugins/coral-plugin-auth/index.js
new file mode 100644
index 000000000..a09954537
--- /dev/null
+++ b/plugins/coral-plugin-auth/index.js
@@ -0,0 +1 @@
+module.exports = {};
\ No newline at end of file
diff --git a/services/users.js b/services/users.js
index 496db4528..4c76f179c 100644
--- a/services/users.js
+++ b/services/users.js
@@ -566,7 +566,6 @@ module.exports = class UsersService {
           // endpoint.
           return;
         }
-
         let redirectDomain;
         try {
           redirectDomain = url.parse(loc).hostname;