Change jHipster login authentication page

Question

I wish to give login page to authenticate the user and then redirect it to jHipster created Home page. The login page is the first thing the user should see

{
  "generator-jhipster": {
    "jhipsterVersion": "3.0.0",
    "baseName": "vconnect",
    "packageName": "com.zenfact.vconnect",
    "packageFolder": "com/zenfact/vconnect",
    "serverPort": "8080",
    "authenticationType": "session",
    "hibernateCache": "ehcache",
    "clusteredHttpSession": "no",
    "websocket": "no",
    "databaseType": "sql",
    "devDatabaseType": "postgresql",
    "prodDatabaseType": "postgresql",
    "searchEngine": "elasticsearch",
    "buildTool": "maven",
    "enableSocialSignIn": false,
    "rememberMeKey": "559bbe3167552d040ba24d16506d389a7ba851c3",
    "useSass": false,
    "applicationType": "monolith",
    "testFrameworks": [
      "gatling"
    ],
    "enableTranslation": true,
    "nativeLanguage": "en",
    "languages": [
      "en",
      "zh-cn",
      "fr",
      "hi",
      "ja"
    ]
  }
}

this is what i did in index.html

 <div ui-view="navbar"  ng-cloak></div>
 <div class="container">
  <div class="well" ui-view="content">
  </div>
  <div class="modal-body" ng-controller="LoginController as vm" ng-hide="vm.isAuthenticated()" data-ng-init="translate()">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <h1 translate="login.title">Sign in</h1>
        </div>
        <div class="col-md-8 col-md-offset-2">
            <div class="alert alert-danger" ng-show="vm.authenticationError" translate="login.messages.error.authentication">
                <strong>Failed to sign in!</strong> Please check your credentials and try again.
            </div>
        </div>
        <div class="col-md-8 col-md-offset-2">
            <form class="form" role="form" ng-submit="vm.login($event)">
                <div class="form-group">
                    <label for="username" translate="global.form.username">username</label>
                    <input type="text" class="form-control" id="username" placeholder="userName" ng-model="vm.username">
                </div>
                <div class="form-group">
                    <label for="password" translate="login.form.password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="password"
                           ng-model="vm.password">
                </div>
                <div class="form-group">
                    <label for="rememberMe">
                        <input type="checkbox" id="rememberMe" ng-model="vm.rememberMe" checked>
                        <span translate="login.form.rememberme">Remember me</span>
                    </label>
                </div>
                <button type="submit" class="btn btn-primary" translate="login.form.button">Sign in</button>
            </form>
            <p></p>
            <div class="alert alert-warning">
                <a class="alert-link" href="" ng-click="vm.requestResetPassword()" translate="login.password.forgot">Did you forget your password?</a>
            </div>
            <div class="alert alert-warning" translate="global.messages.info.register" translate-compile>
                You don't have an account yet? <a class="alert-link" href="" ng-click="vm.register()">Register a new account</a>
            </div>
        </div>
    </div>
</div>

I wish to have login page as default page, authenticate the user there and then redirect user according to result.

Answer 1

Edit home state in home.state.js to require authentication

            authorities: ['ROLE_USER'],