PLT-3484 OAuth2 Service Provider (#3632)

* PLT-3484 OAuth2 Service Provider

* PM text review for OAuth 2.0 Service Provider

* PLT-3484 OAuth2 Service Provider UI tweaks (#3668)

* Tweaks to help text

* Pushing OAuth improvements (#3680)

* Re-arrange System Console for OAuth 2.0 Provider

33 files changed, 1173 insertions, 702 deletions

diff --git a/webapp/actions/global_actions.jsx b/webapp/actions/global_actions.jsx
index ba92255ce..829424c1f 100644
--- a/webapp/actions/global_actions.jsx
+++ b/webapp/actions/global_actions.jsx
@@ -308,13 +308,6 @@ export function showLeaveTeamModal() {
     });
 }
 
-export function showRegisterAppModal() {
-    AppDispatcher.handleViewAction({
-        type: ActionTypes.TOGGLE_REGISTER_APP_MODAL,
-        value: true
-    });
-}
-
 export function emitSuggestionPretextChanged(suggestionId, pretext) {
     AppDispatcher.handleViewAction({
         type: ActionTypes.SUGGESTION_PRETEXT_CHANGED,
diff --git a/webapp/actions/oauth_actions.jsx b/webapp/actions/oauth_actions.jsx
new file mode 100644
index 000000000..d2e5b0c98
--- /dev/null
+++ b/webapp/actions/oauth_actions.jsx
@@ -0,0 +1,60 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import Client from 'client/web_client.jsx';
+import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
+import Constants from 'utils/constants.jsx';
+
+const ActionTypes = Constants.ActionTypes;
+
+export function listOAuthApps(userId, onSuccess, onError) {
+    Client.listOAuthApps(
+        (data) => {
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.RECEIVED_OAUTHAPPS,
+                userId,
+                oauthApps: data
+            });
+
+            if (onSuccess) {
+                onSuccess(data);
+            }
+        },
+        onError
+    );
+}
+
+export function deleteOAuthApp(id, userId, onSuccess, onError) {
+    Client.deleteOAuthApp(
+        id,
+        () => {
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.REMOVED_OAUTHAPP,
+                userId,
+                id
+            });
+
+            if (onSuccess) {
+                onSuccess();
+            }
+        },
+        onError
+    );
+}
+
+export function registerOAuthApp(app, onSuccess, onError) {
+    Client.registerOAuthApp(
+        app,
+        (data) => {
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.RECEIVED_OAUTHAPP,
+                oauthApp: data
+            });
+
+            if (onSuccess) {
+                onSuccess();
+            }
+        },
+        onError
+    );
+}
\ No newline at end of file
diff --git a/webapp/client/client.jsx b/webapp/client/client.jsx
index cf015bc84..b200b2379 100644
--- a/webapp/client/client.jsx
+++ b/webapp/client/client.jsx
@@ -1498,6 +1498,36 @@ export default class Client {
             end(this.handleResponse.bind(this, 'allowOAuth2', success, error));
     }
 
+    listOAuthApps(success, error) {
+        request.
+        get(`${this.getOAuthRoute()}/list`).
+        set(this.defaultHeaders).
+        type('application/json').
+        accept('application/json').
+        send().
+        end(this.handleResponse.bind(this, 'getOAuthApps', success, error));
+    }
+
+    deleteOAuthApp(id, success, error) {
+        request.
+        post(`${this.getOAuthRoute()}/delete`).
+        set(this.defaultHeaders).
+        type('application/json').
+        accept('application/json').
+        send({id}).
+        end(this.handleResponse.bind(this, 'deleteOAuthApp', success, error));
+    }
+
+    getOAuthAppInfo(id, success, error) {
+        request.
+        get(`${this.getOAuthRoute()}/app/${id}`).
+        set(this.defaultHeaders).
+        type('application/json').
+        accept('application/json').
+        send().
+        end(this.handleResponse.bind(this, 'getOAuthAppInfo', success, error));
+    }
+
     // Routes for Hooks
 
     addIncomingHook(hook, success, error) {
diff --git a/webapp/components/admin_console/admin_settings.jsx b/webapp/components/admin_console/admin_settings.jsx
index d670d599d..8601722eb 100644
--- a/webapp/components/admin_console/admin_settings.jsx
+++ b/webapp/components/admin_console/admin_settings.jsx
@@ -8,7 +8,6 @@ import Client from 'client/web_client.jsx';
 
 import FormError from 'components/form_error.jsx';
 import SaveButton from 'components/admin_console/save_button.jsx';
-import Constants from 'utils/constants.jsx';
 
 export default class AdminSettings extends React.Component {
     static get propTypes() {
@@ -22,7 +21,6 @@ export default class AdminSettings extends React.Component {
 
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
 
         this.state = Object.assign(this.getStateFromConfig(props.config), {
             saveNeeded: false,
@@ -38,20 +36,6 @@ export default class AdminSettings extends React.Component {
         });
     }
 
-    componentDidMount() {
-        document.addEventListener('keydown', this.onKeyDown);
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener('keydown', this.onKeyDown);
-    }
-
-    onKeyDown(e) {
-        if (e.keyCode === Constants.KeyCodes.ENTER) {
-            this.handleSubmit(e);
-        }
-    }
-
     handleSubmit(e) {
         e.preventDefault();
 
@@ -118,6 +102,7 @@ export default class AdminSettings extends React.Component {
                 <form
                     className='form-horizontal'
                     role='form'
+                    onSubmit={this.handleSubmit}
                 >
                     {this.renderSettings()}
                     <div className='form-group'>
diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx
index d812b83fd..6634d4ac6 100644
--- a/webapp/components/admin_console/admin_sidebar.jsx
+++ b/webapp/components/admin_console/admin_sidebar.jsx
@@ -521,11 +521,11 @@ export default class AdminSidebar extends React.Component {
                                 }
                             >
                                 <AdminSidebarSection
-                                    name='webhooks'
+                                    name='custom'
                                     title={
                                         <FormattedMessage
-                                            id='admin.sidebar.webhooks'
-                                            defaultMessage='Webhooks and Commands'
+                                            id='admin.sidebar.customIntegrations'
+                                            defaultMessage='Custom Integrations'
                                         />
                                     }
                                 />
diff --git a/webapp/components/admin_console/webhook_settings.jsx b/webapp/components/admin_console/custom_integrations_settings.jsx
index ba2443442..cfa1a30ae 100644
--- a/webapp/components/admin_console/webhook_settings.jsx
+++ b/webapp/components/admin_console/custom_integrations_settings.jsx
@@ -24,6 +24,7 @@ export default class WebhookSettings extends AdminSettings {
         config.ServiceSettings.EnableOnlyAdminIntegrations = this.state.enableOnlyAdminIntegrations;
         config.ServiceSettings.EnablePostUsernameOverride = this.state.enablePostUsernameOverride;
         config.ServiceSettings.EnablePostIconOverride = this.state.enablePostIconOverride;
+        config.ServiceSettings.EnableOAuthServiceProvider = this.state.enableOAuthServiceProvider;
 
         return config;
     }
@@ -35,7 +36,8 @@ export default class WebhookSettings extends AdminSettings {
             enableCommands: config.ServiceSettings.EnableCommands,
             enableOnlyAdminIntegrations: config.ServiceSettings.EnableOnlyAdminIntegrations,
             enablePostUsernameOverride: config.ServiceSettings.EnablePostUsernameOverride,
-            enablePostIconOverride: config.ServiceSettings.EnablePostIconOverride
+            enablePostIconOverride: config.ServiceSettings.EnablePostIconOverride,
+            enableOAuthServiceProvider: config.ServiceSettings.EnableOAuthServiceProvider
         };
     }
 
@@ -43,8 +45,8 @@ export default class WebhookSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.integrations.webhook'
-                    defaultMessage='Webhooks and Commands'
+                    id='admin.integrations.custom'
+                    defaultMessage='Custom Integrations'
                 />
             </h3>
         );
@@ -105,6 +107,23 @@ export default class WebhookSettings extends AdminSettings {
                     onChange={this.handleChange}
                 />
                 <BooleanSetting
+                    id='enableOAuthServiceProvider'
+                    label={
+                        <FormattedMessage
+                            id='admin.oauth.providerTitle'
+                            defaultMessage='Enable OAuth 2.0 Service Provider: '
+                        />
+                    }
+                    helpText={
+                        <FormattedMessage
+                            id='admin.oauth.providerDescription'
+                            defaultMessage='When true, Mattermost can act as an OAuth 2.0 service provider allowing external applications to authorize API requests to Mattermost.'
+                        />
+                    }
+                    value={this.state.enableOAuthServiceProvider}
+                    onChange={this.handleChange}
+                />
+                <BooleanSetting
                     id='enableOnlyAdminIntegrations'
                     label={
                         <FormattedMessage
diff --git a/webapp/components/authorize.jsx b/webapp/components/authorize.jsx
index 49ca0f36b..354b51ede 100644
--- a/webapp/components/authorize.jsx
+++ b/webapp/components/authorize.jsx
@@ -10,6 +10,13 @@ import React from 'react';
 import icon50 from 'images/icon50x50.png';
 
 export default class Authorize extends React.Component {
+    static get propTypes() {
+        return {
+            location: React.PropTypes.object.isRequired,
+            params: React.PropTypes.object.isRequired
+        };
+    }
+
     constructor(props) {
         super(props);
 
@@ -18,17 +25,31 @@ export default class Authorize extends React.Component {
 
         this.state = {};
     }
+
+    componentWillMount() {
+        Client.getOAuthAppInfo(
+            this.props.location.query.client_id,
+            (app) => {
+                this.setState({app});
+            }
+        );
+    }
+
+    componentDidMount() {
+        // if we get to this point remove the antiClickjack blocker
+        const blocker = document.getElementById('antiClickjack');
+        if (blocker) {
+            blocker.parentNode.removeChild(blocker);
+        }
+    }
+
     handleAllow() {
-        const responseType = this.props.responseType;
-        const clientId = this.props.clientId;
-        const redirectUri = this.props.redirectUri;
-        const state = this.props.state;
-        const scope = this.props.scope;
+        const params = this.props.location.query;
 
-        Client.allowOAuth2(responseType, clientId, redirectUri, state, scope,
+        Client.allowOAuth2(params.response_type, params.client_id, params.redirect_uri, params.state, params.scope,
             (data) => {
                 if (data.redirect) {
-                    window.location.replace(data.redirect);
+                    window.location.href = data.redirect;
                 }
             },
             () => {
@@ -36,28 +57,42 @@ export default class Authorize extends React.Component {
             }
         );
     }
+
     handleDeny() {
-        window.location.replace(this.props.redirectUri + '?error=access_denied');
+        window.location.replace(this.props.location.query.redirect_uri + '?error=access_denied');
     }
+
     render() {
+        const app = this.state.app;
+        if (!app) {
+            return null;
+        }
+
+        let icon;
+        if (app.icon_url) {
+            icon = app.icon_url;
+        } else {
+            icon = icon50;
+        }
+
         return (
             <div className='container-fluid'>
                 <div className='prompt'>
                     <div className='prompt__heading'>
                         <div className='prompt__app-icon'>
                             <img
-                                src={icon50}
+                                src={icon}
                                 width='50'
                                 height='50'
                                 alt=''
                             />
                         </div>
                         <div className='text'>
-                            <FormattedMessage
+                            <FormattedHTMLMessage
                                 id='authorize.title'
-                                defaultMessage='An application would like to connect to your {teamName} account'
+                                defaultMessage='<strong>{appName}</strong> would like to connect to your <strong>Mattermost</strong> user account'
                                 values={{
-                                    teamName: this.props.teamName
+                                    appName: app.name
                                 }}
                             />
                         </div>
@@ -67,7 +102,7 @@ export default class Authorize extends React.Component {
                             id='authorize.app'
                             defaultMessage='The app <strong>{appName}</strong> would like the ability to access and modify your basic information.'
                             values={{
-                                appName: this.props.appName
+                                appName: app.name
                             }}
                         />
                     </p>
@@ -76,14 +111,14 @@ export default class Authorize extends React.Component {
                             id='authorize.access'
                             defaultMessage='Allow <strong>{appName}</strong> access?'
                             values={{
-                                appName: this.props.appName
+                                appName: app.name
                             }}
                         />
                     </h2>
                     <div className='prompt__buttons'>
                         <button
                             type='submit'
-                            className='btn authorize-btn'
+                            className='btn btn-link authorize-btn'
                             onClick={this.handleDeny}
                         >
                             <FormattedMessage
@@ -107,13 +142,3 @@ export default class Authorize extends React.Component {
         );
     }
 }
-
-Authorize.propTypes = {
-    appName: React.PropTypes.string,
-    teamName: React.PropTypes.string,
-    responseType: React.PropTypes.string,
-    clientId: React.PropTypes.string,
-    redirectUri: React.PropTypes.string,
-    state: React.PropTypes.string,
-    scope: React.PropTypes.string
-};
diff --git a/webapp/components/backstage/components/backstage_sidebar.jsx b/webapp/components/backstage/components/backstage_sidebar.jsx
index 3434b315a..554e3043e 100644
--- a/webapp/components/backstage/components/backstage_sidebar.jsx
+++ b/webapp/components/backstage/components/backstage_sidebar.jsx
@@ -39,20 +39,22 @@ export default class BackstageSidebar extends React.Component {
     }
 
     renderIntegrations() {
-        if (window.mm_config.EnableIncomingWebhooks !== 'true' &&
-            window.mm_config.EnableOutgoingWebhooks !== 'true' &&
-            window.mm_config.EnableCommands !== 'true') {
+        const config = window.mm_config;
+        if (config.EnableIncomingWebhooks !== 'true' &&
+            config.EnableOutgoingWebhooks !== 'true' &&
+            config.EnableCommands !== 'true' &&
+            config.EnableOAuthServiceProvider !== 'true') {
             return null;
         }
 
-        if (window.mm_config.EnableOnlyAdminIntegrations !== 'false' &&
+        if (config.EnableOnlyAdminIntegrations !== 'false' &&
             !Utils.isSystemAdmin(this.props.user.roles) &&
             !TeamStore.isTeamAdmin(this.props.user.id, this.props.team.id)) {
             return null;
         }
 
         let incomingWebhooks = null;
-        if (window.mm_config.EnableIncomingWebhooks === 'true') {
+        if (config.EnableIncomingWebhooks === 'true') {
             incomingWebhooks = (
                 <BackstageSection
                     name='incoming_webhooks'
@@ -67,7 +69,7 @@ export default class BackstageSidebar extends React.Component {
         }
 
         let outgoingWebhooks = null;
-        if (window.mm_config.EnableOutgoingWebhooks === 'true') {
+        if (config.EnableOutgoingWebhooks === 'true') {
             outgoingWebhooks = (
                 <BackstageSection
                     name='outgoing_webhooks'
@@ -82,7 +84,7 @@ export default class BackstageSidebar extends React.Component {
         }
 
         let commands = null;
-        if (window.mm_config.EnableCommands === 'true') {
+        if (config.EnableCommands === 'true') {
             commands = (
                 <BackstageSection
                     name='commands'
@@ -96,6 +98,21 @@ export default class BackstageSidebar extends React.Component {
             );
         }
 
+        let oauthApps = null;
+        if (config.EnableOAuthServiceProvider === 'true') {
+            oauthApps = (
+                <BackstageSection
+                    name='oauth2-apps'
+                    title={
+                        <FormattedMessage
+                            id='backstage_sidebar.integrations.oauthApps'
+                            defaultMessage='OAuth 2.0 Applications'
+                        />
+                    }
+                />
+            );
+        }
+
         return (
             <BackstageCategory
                 name='integrations'
@@ -111,6 +128,7 @@ export default class BackstageSidebar extends React.Component {
                 {incomingWebhooks}
                 {outgoingWebhooks}
                 {commands}
+                {oauthApps}
             </BackstageCategory>
         );
     }
diff --git a/webapp/components/integrations/components/add_oauth_app.jsx b/webapp/components/integrations/components/add_oauth_app.jsx
new file mode 100644
index 000000000..7e56aea8f
--- /dev/null
+++ b/webapp/components/integrations/components/add_oauth_app.jsx
@@ -0,0 +1,435 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import * as OAuthActions from 'actions/oauth_actions.jsx';
+
+import BackstageHeader from 'components/backstage/components/backstage_header.jsx';
+import {FormattedMessage} from 'react-intl';
+import FormError from 'components/form_error.jsx';
+import {browserHistory, Link} from 'react-router/es6';
+import SpinnerButton from 'components/spinner_button.jsx';
+
+export default class AddOAuthApp extends React.Component {
+    static get propTypes() {
+        return {
+            team: React.propTypes.object.isRequired
+        };
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.handleSubmit = this.handleSubmit.bind(this);
+
+        this.updateName = this.updateName.bind(this);
+        this.updateTrusted = this.updateTrusted.bind(this);
+        this.updateDescription = this.updateDescription.bind(this);
+        this.updateHomepage = this.updateHomepage.bind(this);
+        this.updateIconUrl = this.updateIconUrl.bind(this);
+        this.updateCallbackUrls = this.updateCallbackUrls.bind(this);
+
+        this.imageLoaded = this.imageLoaded.bind(this);
+        this.image = new Image();
+        this.image.onload = this.imageLoaded;
+
+        this.state = {
+            name: '',
+            description: '',
+            homepage: '',
+            icon_url: '',
+            callbackUrls: '',
+            is_trusted: false,
+            has_icon: false,
+            saving: false,
+            serverError: '',
+            clientError: null
+        };
+    }
+
+    imageLoaded() {
+        this.setState({
+            has_icon: true,
+            icon_url: this.refs.icon_url.value
+        });
+    }
+
+    handleSubmit(e) {
+        e.preventDefault();
+
+        if (this.state.saving) {
+            return;
+        }
+
+        this.setState({
+            saving: true,
+            serverError: '',
+            clientError: ''
+        });
+
+        if (!this.state.name) {
+            this.setState({
+                saving: false,
+                clientError: (
+                    <FormattedMessage
+                        id='add_oauth_app.nameRequired'
+                        defaultMessage='Name for the OAuth 2.0 application is required.'
+                    />
+                )
+            });
+
+            return;
+        }
+
+        if (!this.state.description) {
+            this.setState({
+                saving: false,
+                clientError: (
+                    <FormattedMessage
+                        id='add_oauth_app.descriptionRequired'
+                        defaultMessage='Description for the OAuth 2.0 application is required.'
+                    />
+                )
+            });
+
+            return;
+        }
+
+        if (!this.state.homepage) {
+            this.setState({
+                saving: false,
+                clientError: (
+                    <FormattedMessage
+                        id='add_oauth_app.homepageRequired'
+                        defaultMessage='Homepage for the OAuth 2.0 application is required.'
+                    />
+                )
+            });
+
+            return;
+        }
+
+        const callbackUrls = [];
+        for (let callbackUrl of this.state.callbackUrls.split('\n')) {
+            callbackUrl = callbackUrl.trim();
+
+            if (callbackUrl.length > 0) {
+                callbackUrls.push(callbackUrl);
+            }
+        }
+
+        if (callbackUrls.length === 0) {
+            this.setState({
+                saving: false,
+                clientError: (
+                    <FormattedMessage
+                        id='add_oauth_app.callbackUrlsRequired'
+                        defaultMessage='One or more callback URLs are required.'
+                    />
+                )
+            });
+
+            return;
+        }
+
+        const app = {
+            name: this.state.name,
+            callback_urls: callbackUrls,
+            homepage: this.state.homepage,
+            description: this.state.description,
+            is_trusted: this.state.is_trusted,
+            icon_url: this.state.icon_url
+        };
+
+        OAuthActions.registerOAuthApp(
+            app,
+            () => {
+                browserHistory.push('/' + this.props.team.name + '/integrations/oauth2-apps');
+            },
+            (err) => {
+                this.setState({
+                    saving: false,
+                    serverError: err.message
+                });
+            }
+        );
+    }
+
+    updateName(e) {
+        this.setState({
+            name: e.target.value
+        });
+    }
+
+    updateTrusted(e) {
+        this.setState({
+            is_trusted: e.target.value === 'true'
+        });
+    }
+
+    updateDescription(e) {
+        this.setState({
+            description: e.target.value
+        });
+    }
+
+    updateHomepage(e) {
+        this.setState({
+            homepage: e.target.value
+        });
+    }
+
+    updateIconUrl(e) {
+        this.setState({
+            has_icon: false,
+            icon_url: ''
+        });
+        this.image.src = e.target.value;
+    }
+
+    updateCallbackUrls(e) {
+        this.setState({
+            callbackUrls: e.target.value
+        });
+    }
+
+    render() {
+        let icon;
+        if (this.state.has_icon) {
+            icon = (
+                <div className='integration__icon'>
+                    <img src={this.state.icon_url}/>
+                </div>
+            );
+        }
+
+        return (
+            <div className='backstage-content'>
+                <BackstageHeader>
+                    <Link to={'/' + this.props.team.name + '/integrations/oauth2-apps'}>
+                        <FormattedMessage
+                            id='installed_oauth_apps.header'
+                            defaultMessage='Installed OAuth2 Apps'
+                        />
+                    </Link>
+                    <FormattedMessage
+                        id='add_oauth_app.header'
+                        defaultMessage='Add'
+                    />
+                </BackstageHeader>
+                <div className='backstage-form'>
+                    {icon}
+                    <form className='form-horizontal'>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='is_trusted'
+                            >
+                                <FormattedMessage
+                                    id='installed_oauth_apps.trusted'
+                                    defaultMessage='Is Trusted'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <label className='radio-inline'>
+                                    <input
+                                        type='radio'
+                                        value='true'
+                                        name='is_trusted'
+                                        checked={this.state.is_trusted}
+                                        onChange={this.updateTrusted}
+                                    />
+                                    <FormattedMessage
+                                        id='installed_oauth_apps.trusted.yes'
+                                        defaultMessage='Yes'
+                                    />
+                                </label>
+                                <label className='radio-inline'>
+                                    <input
+                                        type='radio'
+                                        value='false'
+                                        name='is_trusted'
+                                        checked={!this.state.is_trusted}
+                                        onChange={this.updateTrusted}
+                                    />
+                                    <FormattedMessage
+                                        id='installed_oauth_apps.trusted.no'
+                                        defaultMessage='No'
+                                    />
+                                </label>
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_oauth_app.trusted.help'
+                                        defaultMessage="When true, the OAuth 2.0 application is considered trusted by the Mattermost server and doesn't require the user to accept authorization. When false, an additional window will appear, asking the user to accept or deny the authorization."
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='name'
+                            >
+                                <FormattedMessage
+                                    id='installed_oauth_apps.name'
+                                    defaultMessage='Display Name'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <input
+                                    id='name'
+                                    type='text'
+                                    maxLength='64'
+                                    className='form-control'
+                                    value={this.state.name}
+                                    onChange={this.updateName}
+                                />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_oauth_app.name.help'
+                                        defaultMessage='Display name for your OAuth 2.0 application made of up to 64 characters.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='description'
+                            >
+                                <FormattedMessage
+                                    id='installed_oauth_apps.description'
+                                    defaultMessage='Description'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <input
+                                    id='description'
+                                    type='text'
+                                    maxLength='512'
+                                    className='form-control'
+                                    value={this.state.description}
+                                    onChange={this.updateDescription}
+                                />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_oauth_app.description.help'
+                                        defaultMessage='Description for your OAuth 2.0 application.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='homepage'
+                            >
+                                <FormattedMessage
+                                    id='installed_oauth_apps.homepage'
+                                    defaultMessage='Homepage'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <input
+                                    id='homepage'
+                                    type='url'
+                                    maxLength='256'
+                                    className='form-control'
+                                    value={this.state.homepage}
+                                    onChange={this.updateHomepage}
+                                />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_oauth_app.homepage.help'
+                                        defaultMessage='The URL for the homepage of the OAuth 2.0 application. Make sure you use HTTP or HTTPS in your URL depending on your server configuration.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='icon_url'
+                            >
+                                <FormattedMessage
+                                    id='installed_oauth_apps.iconUrl'
+                                    defaultMessage='Icon URL'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <input
+                                    id='icon_url'
+                                    ref='icon_url'
+                                    type='url'
+                                    maxLength='512'
+                                    className='form-control'
+                                    onChange={this.updateIconUrl}
+                                />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_oauth_app.icon.help'
+                                        defaultMessage='The URL for the homepage of the OAuth 2.0 application. Make sure you use HTTP or HTTPS in your URL depending on your server configuration.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='callbackUrls'
+                            >
+                                <FormattedMessage
+                                    id='installed_oauth_apps.callbackUrls'
+                                    defaultMessage='Callback URLs (One Per Line)'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <textarea
+                                    id='callbackUrls'
+                                    rows='3'
+                                    maxLength='1024'
+                                    className='form-control'
+                                    value={this.state.callbackUrls}
+                                    onChange={this.updateCallbackUrls}
+                                />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_oauth_app.callbackUrls.help'
+                                        defaultMessage='The redirect URIs to which the service will redirect users after accepting or denying authorization of your application, and which will handle authorization codes or access tokens. Must be a valid URL and start with http:// or https://.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='backstage-form__footer'>
+                            <FormError
+                                type='backstage'
+                                errors={[this.state.serverError, this.state.clientError]}
+                            />
+                            <Link
+                                className='btn btn-sm'
+                                to={'/' + this.props.team.name + '/integrations/oauth2-apps'}
+                            >
+                                <FormattedMessage
+                                    id='installed_oauth_apps.cancel'
+                                    defaultMessage='Cancel'
+                                />
+                            </Link>
+                            <SpinnerButton
+                                className='btn btn-primary'
+                                type='submit'
+                                spinning={this.state.saving}
+                                onClick={this.handleSubmit}
+                            >
+                                <FormattedMessage
+                                    id='installed_oauth_apps.save'
+                                    defaultMessage='Save'
+                                />
+                            </SpinnerButton>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/webapp/components/integrations/components/installed_oauth_app.jsx b/webapp/components/integrations/components/installed_oauth_app.jsx
new file mode 100644
index 000000000..37fc061f7
--- /dev/null
+++ b/webapp/components/integrations/components/installed_oauth_app.jsx
@@ -0,0 +1,219 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import * as Utils from 'utils/utils.jsx';
+
+import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
+
+const FAKE_SECRET = '***************';
+
+export default class InstalledOAuthApp extends React.Component {
+    static get propTypes() {
+        return {
+            oauthApp: React.PropTypes.object.isRequired,
+            onDelete: React.PropTypes.func.isRequired,
+            filter: React.PropTypes.string
+        };
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.handleShowClientSecret = this.handleShowClientSecret.bind(this);
+        this.handleHideClientScret = this.handleHideClientScret.bind(this);
+        this.handleDelete = this.handleDelete.bind(this);
+
+        this.matchesFilter = this.matchesFilter.bind(this);
+
+        this.state = {
+            clientSecret: FAKE_SECRET
+        };
+    }
+
+    handleShowClientSecret(e) {
+        e.preventDefault();
+        this.setState({clientSecret: this.props.oauthApp.client_secret});
+    }
+
+    handleHideClientScret(e) {
+        e.preventDefault();
+        this.setState({clientSecret: FAKE_SECRET});
+    }
+
+    handleDelete(e) {
+        e.preventDefault();
+
+        this.props.onDelete(this.props.oauthApp);
+    }
+
+    matchesFilter(oauthApp, filter) {
+        if (!filter) {
+            return true;
+        }
+
+        return oauthApp.name.toLowerCase().indexOf(filter) !== -1;
+    }
+
+    render() {
+        const oauthApp = this.props.oauthApp;
+
+        if (!this.matchesFilter(oauthApp, this.props.filter)) {
+            return null;
+        }
+
+        let name;
+        if (oauthApp.name) {
+            name = oauthApp.name;
+        } else {
+            name = (
+                <FormattedMessage
+                    id='installed_integrations.unnamed_oauth_app'
+                    defaultMessage='Unnamed OAuth 2.0 Application'
+                />
+            );
+        }
+
+        let description;
+        if (oauthApp.description) {
+            description = (
+                <div className='item-details__row'>
+                    <span className='item-details__description'>
+                        {oauthApp.description}
+                    </span>
+                </div>
+            );
+        }
+
+        const urls = (
+            <div className='item-details__row'>
+                <span className='item-details__url'>
+                    <FormattedMessage
+                        id='installed_integrations.callback_urls'
+                        defaultMessage='Callback URLs: {urls}'
+                        values={{
+                            urls: oauthApp.callback_urls.join(', ')
+                        }}
+                    />
+                </span>
+            </div>
+        );
+
+        let isTrusted;
+        if (oauthApp.is_trusted) {
+            isTrusted = Utils.localizeMessage('installed_oauth_apps.trusted.yes', 'Yes');
+        } else {
+            isTrusted = Utils.localizeMessage('installed_oauth_apps.trusted.no', 'No');
+        }
+
+        let action;
+        if (this.state.clientSecret === FAKE_SECRET) {
+            action = (
+                <a
+                    href='#'
+                    onClick={this.handleShowClientSecret}
+                >
+                    <FormattedMessage
+                        id='installed_integrations.showSecret'
+                        defaultMessage='Show Secret'
+                    />
+                </a>
+            );
+        } else {
+            action = (
+                <a
+                    href='#'
+                    onClick={this.handleHideClientScret}
+                >
+                    <FormattedMessage
+                        id='installed_integrations.hideSecret'
+                        defaultMessage='Hide Secret'
+                    />
+                </a>
+            );
+        }
+
+        let icon;
+        if (oauthApp.icon_url) {
+            icon = (
+                <div className='integration__icon integration-list__icon'>
+                    <img src={oauthApp.icon_url}/>
+                </div>
+            );
+        }
+
+        return (
+            <div className='backstage-list__item'>
+                {icon}
+                <div className='item-details'>
+                    <div className='item-details__row'>
+                        <span className='item-details__name'>
+                            {name}
+                        </span>
+                    </div>
+                    {description}
+                    <div className='item-details__row'>
+                        <span className='item-details__url'>
+                            <FormattedHTMLMessage
+                                id='installed_oauth_apps.is_trusted'
+                                defaultMessage='Is Trusted: <strong>{isTrusted}</strong>'
+                                values={{
+                                    isTrusted
+                                }}
+                            />
+                        </span>
+                    </div>
+                    <div className='item-details__row'>
+                        <span className='item-details__token'>
+                            <FormattedHTMLMessage
+                                id='installed_integrations.client_id'
+                                defaultMessage='Client ID: <strong>{clientId}</strong>'
+                                values={{
+                                    clientId: oauthApp.id
+                                }}
+                            />
+                        </span>
+                    </div>
+                    <div className='item-details__row'>
+                        <span className='item-details__token'>
+                            <FormattedHTMLMessage
+                                id='installed_integrations.client_secret'
+                                defaultMessage='Client Secret: <strong>{clientSecret}</strong>'
+                                values={{
+                                    clientSecret: this.state.clientSecret
+                                }}
+                            />
+                        </span>
+                    </div>
+                    {urls}
+                    <div className='item-details__row'>
+                        <span className='item-details__creation'>
+                            <FormattedMessage
+                                id='installed_integrations.creation'
+                                defaultMessage='Created by {creator} on {createAt, date, full}'
+                                values={{
+                                    creator: Utils.displayUsername(oauthApp.creator_id),
+                                    createAt: oauthApp.create_at
+                                }}
+                            />
+                        </span>
+                    </div>
+                </div>
+                <div className='item-actions'>
+                    {action}
+                    {' - '}
+                    <a
+                        href='#'
+                        onClick={this.handleDelete}
+                    >
+                        <FormattedMessage
+                            id='installed_integrations.delete'
+                            defaultMessage='Delete'
+                        />
+                    </a>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/webapp/components/integrations/components/installed_oauth_apps.jsx b/webapp/components/integrations/components/installed_oauth_apps.jsx
new file mode 100644
index 000000000..7a3b512dd
--- /dev/null
+++ b/webapp/components/integrations/components/installed_oauth_apps.jsx
@@ -0,0 +1,108 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import UserStore from 'stores/user_store.jsx';
+import IntegrationStore from 'stores/integration_store.jsx';
+import * as OAuthActions from 'actions/oauth_actions.jsx';
+import {localizeMessage} from 'utils/utils.jsx';
+
+import BackstageList from 'components/backstage/components/backstage_list.jsx';
+import {FormattedMessage} from 'react-intl';
+import InstalledOAuthApp from './installed_oauth_app.jsx';
+
+export default class InstalledOAuthApps extends React.Component {
+    static get propTypes() {
+        return {
+            team: React.propTypes.object.isRequired
+        };
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.handleIntegrationChange = this.handleIntegrationChange.bind(this);
+
+        this.deleteOAuthApp = this.deleteOAuthApp.bind(this);
+
+        const userId = UserStore.getCurrentId();
+
+        this.state = {
+            oauthApps: IntegrationStore.getOAuthApps(userId),
+            loading: !IntegrationStore.hasReceivedOAuthApps(userId)
+        };
+    }
+
+    componentDidMount() {
+        IntegrationStore.addChangeListener(this.handleIntegrationChange);
+
+        if (window.mm_config.EnableOAuthServiceProvider === 'true') {
+            OAuthActions.listOAuthApps(UserStore.getCurrentId());
+        }
+    }
+
+    componentWillUnmount() {
+        IntegrationStore.removeChangeListener(this.handleIntegrationChange);
+    }
+
+    handleIntegrationChange() {
+        const userId = UserStore.getCurrentId();
+
+        this.setState({
+            oauthApps: IntegrationStore.getOAuthApps(userId),
+            loading: !IntegrationStore.hasReceivedOAuthApps(userId)
+        });
+    }
+
+    deleteOAuthApp(app) {
+        const userId = UserStore.getCurrentId();
+        OAuthActions.deleteOAuthApp(app.id, userId);
+    }
+
+    render() {
+        const oauthApps = this.state.oauthApps.map((app) => {
+            return (
+                <InstalledOAuthApp
+                    key={app.id}
+                    oauthApp={app}
+                    onDelete={this.deleteOAuthApp}
+                />
+            );
+        });
+
+        return (
+            <BackstageList
+                header={
+                    <FormattedMessage
+                        id='installed_oauth_apps.header'
+                        defaultMessage='OAuth 2.0 Applications'
+                    />
+                }
+                helpText={
+                    <FormattedMessage
+                        id='installed_oauth_apps.help'
+                        defaultMessage='OAuth 2.0 Applications are available to everyone on your server.'
+                    />
+                }
+                addText={
+                    <FormattedMessage
+                        id='installed_oauth_apps.add'
+                        defaultMessage='Add OAuth 2.0 Application'
+                    />
+                }
+                addLink={'/' + this.props.team.name + '/integrations/oauth2-apps/add'}
+                emptyText={
+                    <FormattedMessage
+                        id='installed_oauth_apps.empty'
+                        defaultMessage='No OAuth 2.0 Applications found'
+                    />
+                }
+                searchPlaceholder={localizeMessage('installed_oauth_apps.search', 'Search OAuth 2.0 Applications')}
+                loading={this.state.loading}
+            >
+                {oauthApps}
+            </BackstageList>
+        );
+    }
+}
diff --git a/webapp/components/integrations/components/integrations.jsx b/webapp/components/integrations/components/integrations.jsx
index 7894ced5d..ec923c4f0 100644
--- a/webapp/components/integrations/components/integrations.jsx
+++ b/webapp/components/integrations/components/integrations.jsx
@@ -7,6 +7,7 @@ import {FormattedMessage} from 'react-intl';
 import IntegrationOption from './integration_option.jsx';
 
 import WebhookIcon from 'images/webhook_icon.jpg';
+import AppIcon from 'images/oauth_icon.png';
 
 export default class Integrations extends React.Component {
     static get propTypes() {
@@ -17,8 +18,9 @@ export default class Integrations extends React.Component {
 
     render() {
         const options = [];
+        const config = window.mm_config;
 
-        if (window.mm_config.EnableIncomingWebhooks === 'true') {
+        if (config.EnableIncomingWebhooks === 'true') {
             options.push(
                 <IntegrationOption
                     key='incomingWebhook'
@@ -40,7 +42,7 @@ export default class Integrations extends React.Component {
             );
         }
 
-        if (window.mm_config.EnableOutgoingWebhooks === 'true') {
+        if (config.EnableOutgoingWebhooks === 'true') {
             options.push(
                 <IntegrationOption
                     key='outgoingWebhook'
@@ -62,7 +64,7 @@ export default class Integrations extends React.Component {
             );
         }
 
-        if (window.mm_config.EnableCommands === 'true') {
+        if (config.EnableCommands === 'true') {
             options.push(
                 <IntegrationOption
                     key='command'
@@ -84,6 +86,28 @@ export default class Integrations extends React.Component {
             );
         }
 
+        if (config.EnableOAuthServiceProvider === 'true') {
+            options.push(
+                <IntegrationOption
+                    key='oauth2Apps'
+                    image={AppIcon}
+                    title={
+                        <FormattedMessage
+                            id='integrations.oauthApps.title'
+                            defaultMessage='OAuth 2.0 Applications'
+                        />
+                    }
+                    description={
+                        <FormattedMessage
+                            id='integrations.oauthApps.description'
+                            defaultMessage='Auth 2.0 allows external applications to make authorized requests to the Mattermost API.'
+                        />
+                    }
+                    link={'/' + this.props.team.name + '/integrations/oauth2-apps'}
+                />
+            );
+        }
+
         return (
             <div className='backstage-content row'>
                 <div className='backstage-header'>
diff --git a/webapp/components/login/login_controller.jsx b/webapp/components/login/login_controller.jsx
index 69981cfd6..f84c30d51 100644
--- a/webapp/components/login/login_controller.jsx
+++ b/webapp/components/login/login_controller.jsx
@@ -146,11 +146,12 @@ export default class LoginController extends React.Component {
             token,
             () => {
                 // check for query params brought over from signup_user_complete
-                if (this.props.location.query.id || this.props.location.query.h) {
+                const query = this.props.location.query;
+                if (query.id || query.h) {
                     Client.addUserToTeamFromInvite(
-                        this.props.location.query.d,
-                        this.props.location.query.h,
-                        this.props.location.query.id,
+                        query.d,
+                        query.h,
+                        query.id,
                         () => {
                             this.finishSignin();
                         },
@@ -200,8 +201,13 @@ export default class LoginController extends React.Component {
     finishSignin() {
         GlobalActions.emitInitialLoad(
             () => {
+                const query = this.props.location.query;
                 GlobalActions.loadDefaultLocale();
-                browserHistory.push('/select_team');
+                if (query.redirect_to) {
+                    browserHistory.push(query.redirect_to);
+                } else {
+                    browserHistory.push('/select_team');
+                }
             }
         );
     }
@@ -401,7 +407,7 @@ export default class LoginController extends React.Component {
                             defaultMessage="Don't have an account? "
                         />
                         <Link
-                            to={'/signup_user_complete'}
+                            to={'/signup_user_complete' + this.props.location.search}
                             className='signup-team-login'
                         >
                             <FormattedMessage
diff --git a/webapp/components/navbar_dropdown.jsx b/webapp/components/navbar_dropdown.jsx
index f82bd564e..39bd6b159 100644
--- a/webapp/components/navbar_dropdown.jsx
+++ b/webapp/components/navbar_dropdown.jsx
@@ -99,6 +99,7 @@ export default class NavbarDropdown extends React.Component {
     }
 
     render() {
+        const config = global.window.mm_config;
         var teamLink = '';
         var inviteLink = '';
         var manageLink = '';
@@ -131,7 +132,7 @@ export default class NavbarDropdown extends React.Component {
                 </li>
             );
 
-            if (this.props.teamType === Constants.OPEN_TEAM && global.window.mm_config.EnableUserCreation === 'true') {
+            if (this.props.teamType === Constants.OPEN_TEAM && config.EnableUserCreation === 'true') {
                 teamLink = (
                     <li>
                         <a
@@ -148,10 +149,10 @@ export default class NavbarDropdown extends React.Component {
             }
 
             if (global.window.mm_license.IsLicensed === 'true') {
-                if (global.window.mm_config.RestrictTeamInvite === Constants.PERMISSIONS_SYSTEM_ADMIN && !isSystemAdmin) {
+                if (config.RestrictTeamInvite === Constants.PERMISSIONS_SYSTEM_ADMIN && !isSystemAdmin) {
                     teamLink = null;
                     inviteLink = null;
-                } else if (global.window.mm_config.RestrictTeamInvite === Constants.PERMISSIONS_TEAM_ADMIN && !isAdmin) {
+                } else if (config.RestrictTeamInvite === Constants.PERMISSIONS_TEAM_ADMIN && !isAdmin) {
                     teamLink = null;
                     inviteLink = null;
                 }
@@ -201,10 +202,11 @@ export default class NavbarDropdown extends React.Component {
         );
 
         const integrationsEnabled =
-            window.mm_config.EnableIncomingWebhooks === 'true' ||
-            window.mm_config.EnableOutgoingWebhooks === 'true' ||
-            window.mm_config.EnableCommands === 'true';
-        if (integrationsEnabled && (isAdmin || window.mm_config.EnableOnlyAdminIntegrations !== 'true')) {
+            config.EnableIncomingWebhooks === 'true' ||
+            config.EnableOutgoingWebhooks === 'true' ||
+            config.EnableCommands === 'true' ||
+            config.EnableOAuthServiceProvider === 'true';
+        if (integrationsEnabled && (isAdmin || config.EnableOnlyAdminIntegrations !== 'true')) {
             integrationsLink = (
                 <li>
                     <Link to={'/' + this.props.teamName + '/integrations'}>
@@ -234,7 +236,7 @@ export default class NavbarDropdown extends React.Component {
 
         var teams = [];
 
-        if (global.window.mm_config.EnableTeamCreation === 'true') {
+        if (config.EnableTeamCreation === 'true') {
             teams.push(
                 <li key='newTeam_li'>
                     <Link
@@ -297,13 +299,13 @@ export default class NavbarDropdown extends React.Component {
         }
 
         let helpLink = null;
-        if (global.window.mm_config.HelpLink) {
+        if (config.HelpLink) {
             helpLink = (
                 <li>
                     <Link
                         target='_blank'
                         rel='noopener noreferrer'
-                        to={global.window.mm_config.HelpLink}
+                        to={config.HelpLink}
                     >
                         <FormattedMessage
                             id='navbar_dropdown.help'
@@ -315,13 +317,13 @@ export default class NavbarDropdown extends React.Component {
         }
 
         let reportLink = null;
-        if (global.window.mm_config.ReportAProblemLink) {
+        if (config.ReportAProblemLink) {
             reportLink = (
                 <li>
                     <Link
                         target='_blank'
                         rel='noopener noreferrer'
-                        to={global.window.mm_config.ReportAProblemLink}
+                        to={config.ReportAProblemLink}
                     >
                         <FormattedMessage
                             id='navbar_dropdown.report'
diff --git a/webapp/components/needs_team.jsx b/webapp/components/needs_team.jsx
index 27951db0f..6c023d497 100644
--- a/webapp/components/needs_team.jsx
+++ b/webapp/components/needs_team.jsx
@@ -31,7 +31,6 @@ import DeletePostModal from 'components/delete_post_modal.jsx';
 import MoreChannelsModal from 'components/more_channels.jsx';
 import TeamSettingsModal from 'components/team_settings_modal.jsx';
 import RemovedFromChannelModal from 'components/removed_from_channel_modal.jsx';
-import RegisterAppModal from 'components/register_app_modal.jsx';
 import ImportThemeModal from 'components/user_settings/import_theme_modal.jsx';
 import InviteMemberModal from 'components/invite_member_modal.jsx';
 import LeaveTeamModal from 'components/leave_team_modal.jsx';
@@ -162,7 +161,6 @@ export default class NeedsTeam extends React.Component {
                     <EditPostModal/>
                     <DeletePostModal/>
                     <RemovedFromChannelModal/>
-                    <RegisterAppModal/>
                     <SelectTeamModal/>
                 </div>
             </div>
diff --git a/webapp/components/register_app_modal.jsx b/webapp/components/register_app_modal.jsx
deleted file mode 100644
index b9523c3ed..000000000
--- a/webapp/components/register_app_modal.jsx
+++ /dev/null
@@ -1,411 +0,0 @@
-// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import Client from 'client/web_client.jsx';
-import ModalStore from 'stores/modal_store.jsx';
-
-import {Modal} from 'react-bootstrap';
-
-import Constants from 'utils/constants.jsx';
-import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
-
-const ActionTypes = Constants.ActionTypes;
-
-const holders = defineMessages({
-    required: {
-        id: 'register_app.required',
-        defaultMessage: 'Required'
-    },
-    optional: {
-        id: 'register_app.optional',
-        defaultMessage: 'Optional'
-    }
-});
-
-import React from 'react';
-
-class RegisterAppModal extends React.Component {
-    constructor() {
-        super();
-
-        this.handleSubmit = this.handleSubmit.bind(this);
-        this.onHide = this.onHide.bind(this);
-        this.save = this.save.bind(this);
-        this.updateShow = this.updateShow.bind(this);
-
-        this.state = {
-            clientId: '',
-            clientSecret: '',
-            saved: false,
-            show: false
-        };
-    }
-    componentDidMount() {
-        ModalStore.addModalListener(ActionTypes.TOGGLE_REGISTER_APP_MODAL, this.updateShow);
-    }
-    componentWillUnmount() {
-        ModalStore.removeModalListener(ActionTypes.TOGGLE_REGISTER_APP_MODAL, this.updateShow);
-    }
-    updateShow(show) {
-        if (!show) {
-            if (this.state.clientId !== '' && !this.state.saved) {
-                return;
-            }
-
-            this.setState({
-                clientId: '',
-                clientSecret: '',
-                saved: false,
-                homepageError: null,
-                callbackError: null,
-                serverError: null,
-                nameError: null
-            });
-        }
-
-        this.setState({show});
-    }
-    handleSubmit(e) {
-        e.preventDefault();
-
-        var state = this.state;
-        state.serverError = null;
-
-        var app = {};
-
-        var name = this.refs.name.value;
-        if (!name || name.length === 0) {
-            state.nameError = true;
-            this.setState(state);
-            return;
-        }
-        state.nameError = null;
-        app.name = name;
-
-        var homepage = this.refs.homepage.value;
-        if (!homepage || homepage.length === 0) {
-            state.homepageError = true;
-            this.setState(state);
-            return;
-        }
-        state.homepageError = null;
-        app.homepage = homepage;
-
-        var desc = this.refs.desc.value;
-        app.description = desc;
-
-        var rawCallbacks = this.refs.callback.value.trim();
-        if (!rawCallbacks || rawCallbacks.length === 0) {
-            state.callbackError = true;
-            this.setState(state);
-            return;
-        }
-        state.callbackError = null;
-        app.callback_urls = rawCallbacks.split('\n');
-
-        Client.registerOAuthApp(app,
-            (data) => {
-                state.clientId = data.id;
-                state.clientSecret = data.client_secret;
-                this.setState(state);
-            },
-            (err) => {
-                state.serverError = err.message;
-                this.setState(state);
-            }
-        );
-    }
-    onHide(e) {
-        if (!this.state.saved && this.state.clientId !== '') {
-            e.preventDefault();
-            return;
-        }
-
-        this.setState({clientId: '', clientSecret: '', saved: false});
-    }
-    save() {
-        this.setState({saved: this.refs.save.checked});
-    }
-    render() {
-        const {formatMessage} = this.props.intl;
-        var nameError;
-        if (this.state.nameError) {
-            nameError = (
-                <div className='form-group has-error'>
-                    <label className='control-label'>
-                        <FormattedMessage
-                            id='register_app.nameError'
-                            defaultMessage='Application name must be filled in.'
-                        />
-                    </label>
-                </div>
-            );
-        }
-        var homepageError;
-        if (this.state.homepageError) {
-            homepageError = (
-                <div className='form-group has-error'>
-                    <label className='control-label'>
-                        <FormattedMessage
-                            id='register_app.homepageError'
-                            defaultMessage='Homepage must be filled in.'
-                        />
-                    </label>
-                </div>
-            );
-        }
-        var callbackError;
-        if (this.state.callbackError) {
-            callbackError = (
-                <div className='form-group has-error'>
-                    <label className='control-label'>
-                        <FormattedMessage
-                            id='register_app.callbackError'
-                            defaultMessage='At least one callback URL must be filled in.'
-                        />
-                    </label>
-                </div>
-            );
-        }
-        var serverError;
-        if (this.state.serverError) {
-            serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
-        }
-
-        var body = '';
-        var footer = '';
-        if (this.state.clientId === '') {
-            body = (
-                <div className='settings-modal'>
-                    <div className='form-horizontal user-settings'>
-                        <h4 className='padding-bottom x3'>
-                            <FormattedMessage
-                                id='register_app.title'
-                                defaultMessage='Register a New Application'
-                            />
-                        </h4>
-                        <div className='row'>
-                            <label className='col-sm-4 control-label'>
-                                <FormattedMessage
-                                    id='register_app.name'
-                                    defaultMessage='Application Name'
-                                />
-                            </label>
-                            <div className='col-sm-7'>
-                                <input
-                                    ref='name'
-                                    className='form-control'
-                                    type='text'
-                                    placeholder={formatMessage(holders.required)}
-                                />
-                                {nameError}
-                            </div>
-                        </div>
-                        <div className='row padding-top x2'>
-                            <label className='col-sm-4 control-label'>
-                                <FormattedMessage
-                                    id='register_app.homepage'
-                                    defaultMessage='Homepage URL'
-                                />
-                            </label>
-                            <div className='col-sm-7'>
-                                <input
-                                    ref='homepage'
-                                    className='form-control'
-                                    type='text'
-                                    placeholder={formatMessage(holders.required)}
-                                />
-                                {homepageError}
-                            </div>
-                        </div>
-                        <div className='row padding-top x2'>
-                            <label className='col-sm-4 control-label'>
-                                <FormattedMessage
-                                    id='register_app.description'
-                                    defaultMessage='Description'
-                                />
-                            </label>
-                            <div className='col-sm-7'>
-                                <input
-                                    ref='desc'
-                                    className='form-control'
-                                    type='text'
-                                    placeholder={formatMessage(holders.optional)}
-                                />
-                            </div>
-                        </div>
-                        <div className='row padding-top padding-bottom x2'>
-                            <label className='col-sm-4 control-label'>
-                                <FormattedMessage
-                                    id='register_app.callback'
-                                    defaultMessage='Callback URL'
-                                />
-                            </label>
-                            <div className='col-sm-7'>
-                                <textarea
-                                    ref='callback'
-                                    className='form-control'
-                                    type='text'
-                                    placeholder={formatMessage(holders.required)}
-                                    rows='5'
-                                />
-                                {callbackError}
-                            </div>
-                        </div>
-                        {serverError}
-                    </div>
-                </div>
-            );
-
-            footer = (
-                <div>
-                    <button
-                        type='button'
-                        className='btn btn-default'
-                        onClick={() => this.updateShow(false)}
-                    >
-                        <FormattedMessage
-                            id='register_app.cancel'
-                            defaultMessage='Cancel'
-                        />
-                    </button>
-                    <button
-                        onClick={this.handleSubmit}
-                        type='submit'
-                        className='btn btn-primary'
-                        tabIndex='3'
-                    >
-                        <FormattedMessage
-                            id='register_app.register'
-                            defaultMessage='Register'
-                        />
-                    </button>
-                </div>
-            );
-        } else {
-            var btnClass = ' disabled';
-            if (this.state.saved) {
-                btnClass = '';
-            }
-
-            body = (
-                <div className='form-horizontal user-settings'>
-                    <h4 className='padding-bottom x3'>
-                        <FormattedMessage
-                            id='register_app.credentialsTitle'
-                            defaultMessage='Your Application Credentials'
-                        />
-                    </h4>
-                    <br/>
-                    <div className='row'>
-                        <label className='col-sm-4 control-label'>
-                            <FormattedMessage
-                                id='register_app.clientId'
-                                defaultMessage='Client ID'
-                            />
-                        </label>
-                        <div className='col-sm-7'>
-                            <input
-                                className='form-control'
-                                type='text'
-                                value={this.state.clientId}
-                                readOnly='true'
-                            />
-                        </div>
-                    </div>
-                    <br/>
-                    <div className='row padding-top x2'>
-                        <label className='col-sm-4 control-label'>
-                            <FormattedMessage
-                                id='register_app.clientSecret'
-                                defaultMessage='Client Secret'
-                            /></label>
-                        <div className='col-sm-7'>
-                            <input
-                                className='form-control'
-                                type='text'
-                                value={this.state.clientSecret}
-                                readOnly='true'
-                            />
-                        </div>
-                    </div>
-                    <br/>
-                    <br/>
-                    <strong>
-                        <FormattedMessage
-                            id='register_app.credentialsDescription'
-                            defaultMessage="Save these somewhere SAFE and SECURE. Treat your Client ID as your app's username and your Client Secret as the app's password."
-                        />
-                    </strong>
-                    <br/>
-                    <br/>
-                    <div className='checkbox'>
-                        <label>
-                            <input
-                                ref='save'
-                                type='checkbox'
-                                checked={this.state.saved}
-                                onChange={this.save}
-                            />
-                            <FormattedMessage
-                                id='register_app.credentialsSave'
-                                defaultMessage='I have saved both my Client Id and Client Secret somewhere safe'
-                            />
-                        </label>
-                    </div>
-                </div>
-            );
-
-            footer = (
-                <a
-                    className={'btn btn-sm btn-primary pull-right' + btnClass}
-                    href='#'
-                    onClick={(e) => {
-                        e.preventDefault();
-                        this.updateShow(false);
-                    }}
-                >
-                    <FormattedMessage
-                        id='register_app.close'
-                        defaultMessage='Close'
-                    />
-                </a>
-            );
-        }
-
-        return (
-            <span>
-                <Modal
-                    show={this.state.show}
-                    onHide={() => this.updateShow(false)}
-                >
-                    <Modal.Header closeButton={true}>
-                        <Modal.Title>
-                            <FormattedMessage
-                                id='register_app.dev'
-                                defaultMessage='Developer Applications'
-                            />
-                        </Modal.Title>
-                    </Modal.Header>
-                    <form
-                        role='form'
-                        className='form-horizontal'
-                    >
-                        <Modal.Body>
-                            {body}
-                        </Modal.Body>
-                        <Modal.Footer>
-                            {footer}
-                        </Modal.Footer>
-                    </form>
-                </Modal>
-            </span>
-        );
-    }
-}
-
-RegisterAppModal.propTypes = {
-    intl: intlShape.isRequired
-};
-
-export default injectIntl(RegisterAppModal);
diff --git a/webapp/components/signup_user_complete.jsx b/webapp/components/signup_user_complete.jsx
index 167b41ea1..23e115124 100644
--- a/webapp/components/signup_user_complete.jsx
+++ b/webapp/components/signup_user_complete.jsx
@@ -231,8 +231,13 @@ export default class SignupUserComplete extends React.Component {
     finishSignup() {
         GlobalActions.emitInitialLoad(
             () => {
+                const query = this.props.location.query;
                 GlobalActions.loadDefaultLocale();
-                browserHistory.push('/select_team');
+                if (query.redirect_to) {
+                    browserHistory.push(query.redirect_to);
+                } else {
+                    browserHistory.push('/select_team');
+                }
             }
         );
     }
@@ -250,7 +255,12 @@ export default class SignupUserComplete extends React.Component {
 
                 GlobalActions.emitInitialLoad(
                     () => {
-                        browserHistory.push('/select_team');
+                        const query = this.props.location.query;
+                        if (query.redirect_to) {
+                            browserHistory.push(query.redirect_to);
+                        } else {
+                            browserHistory.push('/select_team');
+                        }
                     }
                 );
             },
diff --git a/webapp/components/user_settings/user_settings.jsx b/webapp/components/user_settings/user_settings.jsx
index cf69a564f..99a7ec93b 100644
--- a/webapp/components/user_settings/user_settings.jsx
+++ b/webapp/components/user_settings/user_settings.jsx
@@ -6,7 +6,6 @@ import * as utils from 'utils/utils.jsx';
 import NotificationsTab from './user_settings_notifications.jsx';
 import SecurityTab from './user_settings_security.jsx';
 import GeneralTab from './user_settings_general.jsx';
-import DeveloperTab from './user_settings_developer.jsx';
 import DisplayTab from './user_settings_display.jsx';
 import AdvancedTab from './user_settings_advanced.jsx';
 
@@ -77,17 +76,6 @@ export default class UserSettings extends React.Component {
                     />
                 </div>
             );
-        } else if (this.props.activeTab === 'developer') {
-            return (
-                <div>
-                    <DeveloperTab
-                        activeSection={this.props.activeSection}
-                        updateSection={this.props.updateSection}
-                        closeModal={this.props.closeModal}
-                        collapseModal={this.props.collapseModal}
-                    />
-                </div>
-            );
         } else if (this.props.activeTab === 'display') {
             return (
                 <div>
diff --git a/webapp/components/user_settings/user_settings_developer.jsx b/webapp/components/user_settings/user_settings_developer.jsx
deleted file mode 100644
index ae6d60362..000000000
--- a/webapp/components/user_settings/user_settings_developer.jsx
+++ /dev/null
@@ -1,138 +0,0 @@
-// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import SettingItemMin from '../setting_item_min.jsx';
-import SettingItemMax from '../setting_item_max.jsx';
-import * as GlobalActions from 'actions/global_actions.jsx';
-
-import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
-
-const holders = defineMessages({
-    applicationsPreview: {
-        id: 'user.settings.developer.applicationsPreview',
-        defaultMessage: 'Applications (Preview)'
-    },
-    thirdParty: {
-        id: 'user.settings.developer.thirdParty',
-        defaultMessage: 'Open to register a new third-party application'
-    }
-});
-
-import React from 'react';
-
-class DeveloperTab extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.register = this.register.bind(this);
-
-        this.state = {};
-    }
-    register() {
-        this.props.closeModal();
-        GlobalActions.showRegisterAppModal();
-    }
-    render() {
-        var appSection;
-        var self = this;
-        const {formatMessage} = this.props.intl;
-        if (this.props.activeSection === 'app') {
-            var inputs = [];
-
-            inputs.push(
-                <div
-                    key='registerbtn'
-                    className='form-group'
-                >
-                    <div className='col-sm-7'>
-                        <a
-                            className='btn btn-sm btn-primary'
-                            onClick={this.register}
-                        >
-                            <FormattedMessage
-                                id='user.settings.developer.register'
-                                defaultMessage='Register New Application'
-                            />
-                        </a>
-                    </div>
-                </div>
-            );
-
-            appSection = (
-                <SettingItemMax
-                    title={formatMessage(holders.applicationsPreview)}
-                    inputs={inputs}
-                    updateSection={function updateSection(e) {
-                        self.props.updateSection('');
-                        e.preventDefault();
-                    }}
-                />
-            );
-        } else {
-            appSection = (
-                <SettingItemMin
-                    title={formatMessage(holders.applicationsPreview)}
-                    describe={formatMessage(holders.thirdParty)}
-                    updateSection={function updateSection() {
-                        self.props.updateSection('app');
-                    }}
-                />
-            );
-        }
-
-        return (
-            <div>
-                <div className='modal-header'>
-                    <button
-                        type='button'
-                        className='close'
-                        data-dismiss='modal'
-                        aria-label='Close'
-                        onClick={this.props.closeModal}
-                    >
-                        <span aria-hidden='true'>{'×'}</span>
-                    </button>
-                    <h4
-                        className='modal-title'
-                        ref='title'
-                    >
-                        <div className='modal-back'>
-                            <i
-                                className='fa fa-angle-left'
-                                onClick={this.props.collapseModal}
-                            />
-                        </div>
-                        <FormattedMessage
-                            id='user.settings.developer.title'
-                            defaultMessage='Developer Settings'
-                        />
-                    </h4>
-                </div>
-                <div className='user-settings'>
-                    <h3 className='tab-header'>
-                        <FormattedMessage
-                            id='user.settings.developer.title'
-                            defaultMessage='Developer Settings'
-                        />
-                    </h3>
-                    <div className='divider-dark first'/>
-                    {appSection}
-                    <div className='divider-dark'/>
-                </div>
-            </div>
-        );
-    }
-}
-
-DeveloperTab.defaultProps = {
-    activeSection: ''
-};
-DeveloperTab.propTypes = {
-    intl: intlShape.isRequired,
-    activeSection: React.PropTypes.string,
-    updateSection: React.PropTypes.func,
-    closeModal: React.PropTypes.func.isRequired,
-    collapseModal: React.PropTypes.func.isRequired
-};
-
-export default injectIntl(DeveloperTab);
diff --git a/webapp/components/user_settings/user_settings_modal.jsx b/webapp/components/user_settings/user_settings_modal.jsx
index de4745aac..9112f8711 100644
--- a/webapp/components/user_settings/user_settings_modal.jsx
+++ b/webapp/components/user_settings/user_settings_modal.jsx
@@ -27,10 +27,6 @@ const holders = defineMessages({
         id: 'user.settings.modal.notifications',
         defaultMessage: 'Notifications'
     },
-    developer: {
-        id: 'user.settings.modal.developer',
-        defaultMessage: 'Developer'
-    },
     display: {
         id: 'user.settings.modal.display',
         defaultMessage: 'Display'
@@ -214,10 +210,6 @@ class UserSettingsModal extends React.Component {
         tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'icon fa fa-gear'});
         tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'icon fa fa-lock'});
         tabs.push({name: 'notifications', uiName: formatMessage(holders.notifications), icon: 'icon fa fa-exclamation-circle'});
-        if (global.window.mm_config.EnableOAuthServiceProvider === 'true') {
-            tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'icon fa fa-th'});
-        }
-
         tabs.push({name: 'display', uiName: formatMessage(holders.display), icon: 'icon fa fa-eye'});
         tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'icon fa fa-list-alt'});
 
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index d77c9e2d8..a512a9e74 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -93,6 +93,17 @@
   "add_incoming_webhook.header": "Add",
   "add_incoming_webhook.name": "Name",
   "add_incoming_webhook.save": "Save",
+  "add_oauth_app.callbackUrls.help": "The redirect URIs to which the service will redirect users after accepting or denying authorization of your application, and which will handle authorization codes or access tokens. Must be a valid URL and start with http:// or https://.",
+  "add_oauth_app.callbackUrlsRequired": "One or more callback URLs are required",
+  "add_oauth_app.description.help": "Description for your OAuth 2.0 application.",
+  "add_oauth_app.descriptionRequired": "Description for the OAuth 2.0 application is required.",
+  "add_oauth_app.header": "Add",
+  "add_oauth_app.homepage.help": "The URL for the homepage of the OAuth 2.0 application. Make sure you use HTTP or HTTPS in your URL depending on your server configuration.",
+  "add_oauth_app.homepageRequired": "Homepage for the OAuth 2.0 application is required.",
+  "add_oauth_app.icon.help": "(Optional) The URL of the image used for your OAuth 2.0 application. Make sure you use HTTP or HTTPS in your URL.",
+  "add_oauth_app.name.help": "Display name for your OAuth 2.0 application made of up to 64 characters.",
+  "add_oauth_app.nameRequired": "Name for the OAuth 2.0 application is required.",
+  "add_oauth_app.trusted.help": "When true, the OAuth 2.0 application is considered trusted by the Mattermost server and doesn't require the user to accept authorization. When false, an additional window will appear, asking the user to accept or deny the authorization.",
   "add_outgoing_webhook.callbackUrls": "Callback URLs (One Per Line)",
   "add_outgoing_webhook.callbackUrls.help": "The URL that messages will be sent to.",
   "add_outgoing_webhook.callbackUrlsRequired": "One or more callback URLs are required",
@@ -360,8 +371,8 @@
   "admin.image.thumbWidthDescription": "Width of thumbnails generated from uploaded images. Updating this value changes how thumbnail images render in future, but does not change images created in the past.",
   "admin.image.thumbWidthExample": "Ex \"120\"",
   "admin.image.thumbWidthTitle": "Attachment Thumbnail Width:",
+  "admin.integrations.custom": "Custom Integrations",
   "admin.integrations.external": "External Services",
-  "admin.integrations.webhook": "Webhooks and Commands",
   "admin.ldap.baseDesc": "The Base DN is the Distinguished Name of the location where Mattermost should start its search for users in the LDAP tree.",
   "admin.ldap.baseEx": "Ex \"ou=Unit Name,dc=corp,dc=example,dc=com\"",
   "admin.ldap.baseTitle": "BaseDN:",
@@ -459,6 +470,8 @@
   "admin.notifications.email": "Email",
   "admin.notifications.push": "Mobile Push",
   "admin.notifications.title": "Notification Settings",
+  "admin.oauth.providerDescription": "When true, Mattermost can act as an OAuth 2.0 service provider allowing external applications to authorize API requests to Mattermost.",
+  "admin.oauth.providerTitle": "Enable OAuth 2.0 Service Provider: ",
   "admin.password.lowercase": "At least one lowercase letter",
   "admin.password.minimumLength": "Minimum Password Length:",
   "admin.password.minimumLengthDescription": "Minimum number of characters required for a valid password. Must be a whole number greater than or equal to {min} and less than or equal to {max}.",
@@ -625,6 +638,7 @@
   "admin.sidebar.connections": "Connections",
   "admin.sidebar.customBrand": "Custom Branding",
   "admin.sidebar.customEmoji": "Custom Emoji",
+  "admin.sidebar.customIntegrations": "Custom Integrations",
   "admin.sidebar.customization": "Customization",
   "admin.sidebar.database": "Database",
   "admin.sidebar.developer": "Developer",
@@ -666,7 +680,6 @@
   "admin.sidebar.users": "Users",
   "admin.sidebar.usersAndTeams": "Users and Teams",
   "admin.sidebar.view_statistics": "Site Statistics",
-  "admin.sidebar.webhooks": "Webhooks and Commands",
   "admin.sidebarHeader.systemConsole": "System Console",
   "admin.sql.dataSource": "Data Source:",
   "admin.sql.driverName": "Driver Name:",
@@ -861,12 +874,13 @@
   "authorize.allow": "Allow",
   "authorize.app": "The app <strong>{appName}</strong> would like the ability to access and modify your basic information.",
   "authorize.deny": "Deny",
-  "authorize.title": "An application would like to connect to your {teamName} account",
+  "authorize.title": "<strong>{appName}</strong> would like to connect to your <strong>Mattermost</strong> user account",
   "backstage_list.search": "Search",
   "backstage_navbar.backToMattermost": "Back to {siteName}",
   "backstage_sidebar.integrations": "Integrations",
   "backstage_sidebar.integrations.commands": "Slash Commands",
   "backstage_sidebar.integrations.incoming_webhooks": "Incoming Webhooks",
+  "backstage_sidebar.integrations.oauthApps": "OAuth 2.0 Applications",
   "backstage_sidebar.integrations.outgoing_webhooks": "Outgoing Webhooks",
   "center_panel.recent": "Click here to jump to recent messages. ",
   "chanel_header.addMembers": "Add Members",
@@ -1161,14 +1175,35 @@
   "installed_incoming_webhooks.search": "Search Incoming Webhooks",
   "installed_incoming_webhooks.unknown_channel": "A Private Webhook",
   "installed_integrations.callback_urls": "Callback URLs: {urls}",
+  "installed_integrations.client_id": "Client ID: <strong>{clientId}</strong>",
+  "installed_integrations.client_secret": "Client Secret: <strong>{clientSecret}</strong>",
   "installed_integrations.content_type": "Content-Type: {contentType}",
   "installed_integrations.creation": "Created by {creator} on {createAt, date, full}",
   "installed_integrations.delete": "Delete",
+  "installed_integrations.hideSecret": "Hide Secret",
   "installed_integrations.regenToken": "Regenerate Token",
+  "installed_integrations.showSecret": "Show Secret",
   "installed_integrations.token": "Token: {token}",
   "installed_integrations.triggerWords": "Trigger Words: {triggerWords}",
   "installed_integrations.triggerWhen": "Trigger When: {triggerWhen}",
+  "installed_integrations.unnamed_oauth_app": "Unnamed OAuth 2.0 Application",
   "installed_integrations.url": "URL: {url}",
+  "installed_oauth_apps.add": "Add OAuth 2.0 Application",
+  "installed_oauth_apps.callbackUrls": "Callback URLs (One Per Line)",
+  "installed_oauth_apps.cancel": "Cancel",
+  "installed_oauth_apps.description": "Description",
+  "installed_oauth_apps.empty": "No OAuth 2.0 Applications found",
+  "installed_oauth_apps.header": "OAuth 2.0 Applications",
+  "installed_oauth_apps.help": "OAuth 2.0 Applications are available to everyone on your server.",
+  "installed_oauth_apps.homepage": "Homepage",
+  "installed_oauth_apps.iconUrl": "Icon URL",
+  "installed_oauth_apps.is_trusted": "Is Trusted: <strong>{isTrusted}</strong>",
+  "installed_oauth_apps.name": "Display Name",
+  "installed_oauth_apps.save": "Save",
+  "installed_oauth_apps.search": "Search OAuth 2.0 Applications",
+  "installed_oauth_apps.trusted": "Is Trusted",
+  "installed_oauth_apps.trusted.no": "No",
+  "installed_oauth_apps.trusted.yes": "Yes",
   "installed_outgoing_webhooks.add": "Add Outgoing Webhook",
   "installed_outgoing_webhooks.empty": "No outgoing webhooks found",
   "installed_outgoing_webhooks.header": "Outgoing Webhooks",
@@ -1181,6 +1216,8 @@
   "integrations.header": "Integrations",
   "integrations.incomingWebhook.description": "Incoming webhooks allow external integrations to send messages",
   "integrations.incomingWebhook.title": "Incoming Webhook",
+  "integrations.oauthApps.description": "OAuth 2.0 allows external applications to make authorized requests to the Mattermost API.",
+  "integrations.oauthApps.title": "OAuth 2.0 Applications",
   "integrations.outgoingWebhook.description": "Outgoing webhooks allow external integrations to receive and respond to messages",
   "integrations.outgoingWebhook.title": "Outgoing Webhook",
   "intro_messages.DM": "This is the start of your direct message history with {teammate}.<br />Direct messages and files shared here are not shown to people outside this area.",
@@ -1338,25 +1375,6 @@
   "post_info.reply": "Reply",
   "posts_view.loadMore": "Load more messages",
   "posts_view.newMsg": "New Messages",
-  "register_app.callback": "Callback URL",
-  "register_app.callbackError": "At least one callback URL must be filled in.",
-  "register_app.cancel": "Cancel",
-  "register_app.clientId": "Client ID",
-  "register_app.clientSecret": "Client Secret",
-  "register_app.close": "Close",
-  "register_app.credentialsDescription": "Save these somewhere SAFE and SECURE. Treat your Client ID as your app's username and your Client Secret as the app's password.",
-  "register_app.credentialsSave": "I have saved both my Client Id and Client Secret somewhere safe",
-  "register_app.credentialsTitle": "Your Application Credentials",
-  "register_app.description": "Description",
-  "register_app.dev": "Developer Applications",
-  "register_app.homepage": "Homepage URL",
-  "register_app.homepageError": "Homepage must be filled in.",
-  "register_app.name": "Application Name",
-  "register_app.nameError": "Application name must be filled in.",
-  "register_app.optional": "Optional",
-  "register_app.register": "Register",
-  "register_app.required": "Required",
-  "register_app.title": "Register a New Application",
   "removed_channel.channelName": "the channel",
   "removed_channel.from": "Removed from ",
   "removed_channel.okay": "Okay",
@@ -1581,10 +1599,6 @@
   "user.settings.custom_theme.sidebarTextHoverBg": "Sidebar Text Hover BG",
   "user.settings.custom_theme.sidebarTitle": "Sidebar Styles",
   "user.settings.custom_theme.sidebarUnreadText": "Sidebar Unread Text",
-  "user.settings.developer.applicationsPreview": "Applications (Preview)",
-  "user.settings.developer.register": "Register New Application",
-  "user.settings.developer.thirdParty": "Open to register a new third-party application",
-  "user.settings.developer.title": "Developer Settings",
   "user.settings.display.channelDisplayTitle": "Channel Display Mode",
   "user.settings.display.channeldisplaymode": "Select the width of the center channel.",
   "user.settings.display.clockDisplay": "Clock Display",
@@ -1679,7 +1693,6 @@
   "user.settings.modal.confirmBtns": "Yes, Discard",
   "user.settings.modal.confirmMsg": "You have unsaved changes, are you sure you want to discard them?",
   "user.settings.modal.confirmTitle": "Discard Changes?",
-  "user.settings.modal.developer": "Developer",
   "user.settings.modal.display": "Display",
   "user.settings.modal.general": "General",
   "user.settings.modal.notifications": "Notifications",
diff --git a/webapp/images/oauth_icon.png b/webapp/images/oauth_icon.png
new file mode 100644
index 000000000..69078b3a5
--- /dev/null
+++ b/webapp/images/oauth_icon.png
diff --git a/webapp/images/webhook_icon.jpg b/webapp/images/webhook_icon.jpg
index af5303421..80f0b1cb6 100644
--- a/webapp/images/webhook_icon.jpg
+++ b/webapp/images/webhook_icon.jpg
diff --git a/webapp/root.html b/webapp/root.html
index 7cead1c59..7987a52fc 100644
--- a/webapp/root.html
+++ b/webapp/root.html
@@ -34,20 +34,13 @@
 
     <!-- CSS Should always go first -->
     <link rel='stylesheet' class='code_theme'>
-    <style id='antiClickjack'>body{display:none !important;}</style>
 
-    <script type='text/javascript'>
-        if (self === top) {
-            var blocker = document.getElementById('antiClickjack');
-            blocker.parentNode.removeChild(blocker);
-        }
-    </script>
 </head>
 <body>
     <div id='root'>
         <div
             class='loading-screen'
-            style='relative'
+            style='position: relative'
         >
             <div class='loading__content'>
                 <div class='round round-1'></div>
diff --git a/webapp/routes/route_admin_console.jsx b/webapp/routes/route_admin_console.jsx
index 291ba65f8..2db29e83b 100644
--- a/webapp/routes/route_admin_console.jsx
+++ b/webapp/routes/route_admin_console.jsx
@@ -24,7 +24,7 @@ import SessionSettings from 'components/admin_console/session_settings.jsx';
 import ConnectionSettings from 'components/admin_console/connection_settings.jsx';
 import EmailSettings from 'components/admin_console/email_settings.jsx';
 import PushSettings from 'components/admin_console/push_settings.jsx';
-import WebhookSettings from 'components/admin_console/webhook_settings.jsx';
+import CustomIntegrationsSettings from 'components/admin_console/custom_integrations_settings.jsx';
 import ExternalServiceSettings from 'components/admin_console/external_service_settings.jsx';
 import DatabaseSettings from 'components/admin_console/database_settings.jsx';
 import StorageSettings from 'components/admin_console/storage_settings.jsx';
@@ -137,10 +137,10 @@ export default (
             />
         </Route>
         <Route path='integrations'>
-            <IndexRedirect to='webhooks'/>
+            <IndexRedirect to='custom'/>
             <Route
-                path='webhooks'
-                component={WebhookSettings}
+                path='custom'
+                component={CustomIntegrationsSettings}
             />
             <Route
                 path='external'
diff --git a/webapp/routes/route_integrations.jsx b/webapp/routes/route_integrations.jsx
index fdfb5d947..a9d86a5e2 100644
--- a/webapp/routes/route_integrations.jsx
+++ b/webapp/routes/route_integrations.jsx
@@ -61,6 +61,22 @@ export default {
                     }
                 }
             ]
+        },
+        {
+            path: 'oauth2-apps',
+            indexRoute: {
+                getComponents: (location, callback) => {
+                    System.import('components/integrations/components/installed_oauth_apps.jsx').then(RouteUtils.importComponentSuccess(callback));
+                }
+            },
+            childRoutes: [
+                {
+                    path: 'add',
+                    getComponents: (location, callback) => {
+                        System.import('components/integrations/components/add_oauth_app.jsx').then(RouteUtils.importComponentSuccess(callback));
+                    }
+                }
+            ]
         }
     ]
 };
diff --git a/webapp/routes/route_root.jsx b/webapp/routes/route_root.jsx
index 88c94b54b..aeca1da72 100644
--- a/webapp/routes/route_root.jsx
+++ b/webapp/routes/route_root.jsx
@@ -130,6 +130,12 @@ export default {
                                             System.import('components/select_team/select_team.jsx').then(RouteUtils.importComponentSuccess(callback));
                                         }
                                     },
+                                    {
+                                        path: '*authorize',
+                                        getComponents: (location, callback) => {
+                                            System.import('components/authorize.jsx').then(RouteUtils.importComponentSuccess(callback));
+                                        }
+                                    },
                                     createTeamRoute
                                 ]
                             )
diff --git a/webapp/sass/components/_oauth.scss b/webapp/sass/components/_oauth.scss
index 04840457c..2b4f2f9c9 100644
--- a/webapp/sass/components/_oauth.scss
+++ b/webapp/sass/components/_oauth.scss
@@ -10,14 +10,19 @@
 
     .prompt__heading {
         display: table;
-        font-size: em(20px);
+        font-size: em(18px);
         line-height: normal;
         margin: 1em 0;
+        table-layout: fixed;
         width: 100%;
 
         > div {
             display: table-cell;
             vertical-align: top;
+
+            &:first-child {
+                width: 70px;
+            }
         }
 
         img {
@@ -26,12 +31,12 @@
     }
 
     .prompt__allow {
-        font-size: em(24px);
+        font-size: em(20px);
         margin: 1em 0;
     }
 
     .prompt__buttons {
-        border-top: 1px solid $dark-gray;
+        border-top: 1px solid $light-gray;
         padding: 1.5em 0;
         text-align: right;
     }
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 53a9f6c7d..df615aa13 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1,6 +1,19 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .prompt {
+        .prompt__heading {
+            display: block;
+
+            > div {
+                &:first-child {
+                    display: block;
+                    margin: 0 0 1em;
+                }
+            }
+        }
+    }
+
     .scrollbar--view {
         margin-right: 0 !important;
     }
@@ -1092,6 +1105,10 @@
             @include translate3d(260px, 0, 0);
         }
     }
+
+    .integration__icon {
+        display: none;
+    }
 }
 
 @media screen and (max-height: 640px) {
diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss
index 4b8c6ff6c..7bcafd4c1 100644
--- a/webapp/sass/routes/_backstage.scss
+++ b/webapp/sass/routes/_backstage.scss
@@ -40,7 +40,7 @@
 .backstage-content {
     background-color: $bg--gray;
     margin: 46px auto;
-    max-width: 960px;
+    max-width: 1200px;
     padding-left: 135px;
     vertical-align: top;
 }
@@ -216,6 +216,7 @@
     border-bottom: 1px solid $light-gray;
     display: flex;
     padding: 20px 15px;
+    position: relative;
 
     &:last-child {
         border: none;
@@ -276,6 +277,7 @@
     background-color: $white;
     border: 1px solid $light-gray;
     padding: 40px 30px 30px;
+    position: relative;
 
     label {
         font-weight: normal;
@@ -323,16 +325,27 @@
     }
 }
 
+.integration__icon {
+    position: absolute;
+    height: 100px;
+    width: 100px;
+    right: 20px;
+
+    &.integration-list__icon {
+        top: 50px;
+    }
+}
+
 .integration-option {
     background-color: $white;
     border: 1px solid $light-gray;
     display: inline-block;
-    height: 210px;
     margin: 0 30px 30px 0;
+    min-height: 230px;
     padding: 20px;
     text-align: center;
     vertical-align: top;
-    width: 250px;
+    width: 290px;
 
     &:last-child {
         margin-right: 0;
@@ -346,6 +359,7 @@
 
 .integration-option__image {
     height: 80px;
+    margin: .5em 0 .7em;
     width: 80px;
 }
 
diff --git a/webapp/stores/integration_store.jsx b/webapp/stores/integration_store.jsx
index 454e6290b..a23b9d206 100644
--- a/webapp/stores/integration_store.jsx
+++ b/webapp/stores/integration_store.jsx
@@ -20,6 +20,8 @@ class IntegrationStore extends EventEmitter {
         this.outgoingWebhooks = new Map();
 
         this.commands = new Map();
+
+        this.oauthApps = new Map();
     }
 
     addChangeListener(callback) {
@@ -149,6 +151,35 @@ class IntegrationStore extends EventEmitter {
         this.setCommands(teamId, commands);
     }
 
+    hasReceivedOAuthApps(userId) {
+        return this.oauthApps.has(userId);
+    }
+
+    getOAuthApps(userId) {
+        return this.oauthApps.get(userId) || [];
+    }
+
+    setOAuthApps(userId, oauthApps) {
+        this.oauthApps.set(userId, oauthApps);
+    }
+
+    addOAuthApp(oauthApp) {
+        const userId = oauthApp.creator_id;
+        const oauthApps = this.getOAuthApps(userId);
+
+        oauthApps.push(oauthApp);
+
+        this.setOAuthApps(userId, oauthApps);
+    }
+
+    removeOAuthApp(userId, id) {
+        let apps = this.getOAuthApps(userId);
+
+        apps = apps.filter((app) => app.id !== id);
+
+        this.setOAuthApps(userId, apps);
+    }
+
     handleEventPayload(payload) {
         const action = payload.action;
 
@@ -197,6 +228,18 @@ class IntegrationStore extends EventEmitter {
             this.removeCommand(action.teamId, action.id);
             this.emitChange();
             break;
+        case ActionTypes.RECEIVED_OAUTHAPPS:
+            this.setOAuthApps(action.userId, action.oauthApps);
+            this.emitChange();
+            break;
+        case ActionTypes.RECEIVED_OAUTHAPP:
+            this.addOAuthApp(action.oauthApp);
+            this.emitChange();
+            break;
+        case ActionTypes.REMOVED_OAUTHAPP:
+            this.removeOAuthApp(action.userId, action.id);
+            this.emitChange();
+            break;
         }
     }
 }
diff --git a/webapp/stores/modal_store.jsx b/webapp/stores/modal_store.jsx
index 0209f3993..9961475b2 100644
--- a/webapp/stores/modal_store.jsx
+++ b/webapp/stores/modal_store.jsx
@@ -37,7 +37,6 @@ class ModalStoreClass extends EventEmitter {
         case ActionTypes.TOGGLE_DELETE_POST_MODAL:
         case ActionTypes.TOGGLE_GET_POST_LINK_MODAL:
         case ActionTypes.TOGGLE_GET_TEAM_INVITE_LINK_MODAL:
-        case ActionTypes.TOGGLE_REGISTER_APP_MODAL:
         case ActionTypes.TOGGLE_GET_PUBLIC_LINK_MODAL:
             this.emit(type, value, args);
             break;
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index 6c0014ac7..812796ebb 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -106,6 +106,9 @@ export const ActionTypes = keyMirror({
     RECEIVED_COMMAND: null,
     UPDATED_COMMAND: null,
     REMOVED_COMMAND: null,
+    RECEIVED_OAUTHAPPS: null,
+    RECEIVED_OAUTHAPP: null,
+    REMOVED_OAUTHAPP: null,
 
     RECEIVED_CUSTOM_EMOJIS: null,
     RECEIVED_CUSTOM_EMOJI: null,
@@ -138,7 +141,6 @@ export const ActionTypes = keyMirror({
     TOGGLE_DELETE_POST_MODAL: null,
     TOGGLE_GET_POST_LINK_MODAL: null,
     TOGGLE_GET_TEAM_INVITE_LINK_MODAL: null,
-    TOGGLE_REGISTER_APP_MODAL: null,
     TOGGLE_GET_PUBLIC_LINK_MODAL: null,
 
     SUGGESTION_PRETEXT_CHANGED: null,