Need help with angular2-bootstrap4-oauth2-webpack?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

196 Stars 67 Forks 164 Commits 6 Opened issues


Angular 2 skeleton app with Bootstrap 4, OAuth2 integration, all packaged up and served with Webpack

Services available


Need anything else?

Contributors list

# 574,178
5 commits


Angular 2, Bootstrap 4, OAuth2, oh my!

Angular 2 skeleton app with Bootstrap 4 and OAuth2 integration, all packaged up and served with Webpack


This application is meant to be a starting point for you to work with Angular 2 and OAuth2, with the added benefits of itegrating the upcoming Bootstrap 4 (in alpha as this project was started) and packaging everything in an easy to use system through the use of Webpack.

There are some basic Grunt tasks defined that will help you create custom builds of Bootstrap or to change the configuration of your application's OAuth2 config. More tasks will be added as the needs surface.

Table of Contents

Getting started

To get started with A2B4O2OM you will need to clone the repository to your local machine and

into it:
git clone
cd angular2-bootstrap4-oauth2-webpack

Once that has been done, you will need to ensure that you have Node.js already installed. You can download it from the Node.js website. I've developed this with the 0.12.x branch, but I've tested it (occasionally) on 4.4.5, and other newer branches should work as well.

Installing Node.js will have the side-effect of installing

, which you will use to download and install all of the application's dependencies. You can do that by running the following command from the main project folder.
npm install

You will also need to install one package globally so that you can run it from the command line:

npm install -g webpack-dev-server

Now that you have the dependencies installed, you should be able to run the applcation with the following command:

npm start

That will compile all of the project's TypeScript (ECMAScript 2015) files into ES5 JavaScript, bundle them with your various internal and external depenencies, and launch them inside a server running on port 3000. You can then hit http://localhost:3000/ to see the application running on your machine.

By default it will be configured to integrate with a sample Google OAuth2 client I've configured. That client will ask for permission to access your basic profile information so that it can show your name on the logout button. If you want to see that in action, just hit the

button in the upper right hand corner of the webapp.

A note about Routers

As I write this, in late June 2016, the Angular 2 team has deprecated its original Angular 2 router and is putting its 3.0 router (formerly called

) through its alpha paces.

This router changes much when compared to the old router, now called

, and offers some nice advantages. One such advantage is the new
directive, which obviates the need for jumping through a lot of hoops. I make use of this new directive in the

As it is the future, and works well enough for my purposes, I'm using the new router. This means that there could be a few breaking changes as the Angular 2 team continues to tweak it. If that causes you great problems, it's not difficult to go back to the old deprecated router.

Changing config environment

A2B4O2OM currently uses a rudimentary environment-based config system that allows you to have different OAuth2 configurations setup for running locally, in dev, in test, or in production. There's also one for using my demo Google OAuth2 credentials. These Grunt tasks will copy the appropriate file from

and overwrite the
file in the
folder, with predjudice.

Choose one of the following commands based upon the environment you wish to load in the source code.

grunt env:local
grunt env:dev
grunt env:test
grunt env:prod
grunt env:google

Use the Google environment if you just want to see OAuth2 in action and you don't have your own server configured. The other files will have to be updated by you, the user, to work with your own OAuth2 infrastructure.

Configuring for OAuth2

You'll find several config files in the

folder of the project. The
file, for example, looks similar to the following:
  "callbackUrl": "http://localhost:3000/auth/callback",
  "implicitGrantUrl": "http://localhost:3001/auth?redirect_uri=__callbackUrl__&response_type=token&client_id=__clientId__&scope=__scopes__",
  "userInfoUrl": "http://localhost:3001/userinfo",
  "userInfoNameField": "nameOfFullnameField",
  "clientId": "a2o2demo",
  "scopes": "yourscopes+gohere"

It is configured as if you had an OAuth2 server running on port 3001 of your local machine. I'll explain what each entry in the file means.

is the URL that the OAuth2 server should redirect the user to so that our application can fetch the access token from the browser window. This must be using the same domain, subdomain, protocol, and port as your main A2B4O2OM application, otherwise the app will be restricted by the browser from accessing the popup browser window.

is the main authorization URL of the OAuth2 server in use. The
, and
tokens in the value get replaced with the actual values you configure in this JSON config file. This allows you to keep things easy to read while still allowing you to change the format of the URL easily.

A2B4O2OM is configured for using an OAuth2 Implicit grant type request, which means it gets an access token directly and has no option for a refresh token. Storing refresh tokens and client secrets in a client-side JavaScript application is a very bad thing, which is why we don't use the Authorization Code grant type.

is the OAuth2 URL to use to gain access to a user's basic information. The access token will be inserted into the headers of the request as a bearer token in an Authorization header.

is the name of the full name field in the JSON payload returned by the
endpoint. Google calls it 'displayName', my personal server calls it 'name'. Hence the reason to have it configurable.

is the ID assigned to your new application by the OAuth2 administrator. There's no need for the associated client secret (password) in our use case.

is the list of '+' separated scopes of data you are requesting. This will be different for each OAuth2 server you come across, most likely.

Deploying the code

If you wish to deploy your application to a real web server, production or otherwise, you can use the appropriate grunt tasks to do so. To build a test/dev build of the site, run the following command:

grunt build

If you require a production ready version of the application that has debugging disabled and has been uglified, then use this command instead:

grunt build:prod

Note that the prod build command will also do a 'grunt env:prod' to copy

before running webpack and building the ZIP file. If you wish to continue in a non-prod environment after building for prod, you will need to execute the appropriate Grunt
command (

Customizing Bootstrap 4

By default, A2B4O2OM ships with a slightly customized version of Bootstrap 4 that differs from what ships in the NPM. That's why you will find it residing in the separate

folder instead of in

The changes can be found in

, which is the main config file used when Building Bootstrap 4. The changes I've made are the following.

The first four modifications change the general look of the framework. Shadows are necessary for the navbar's look to work, and the others are just things I find generally pleasing.

$enable-shadows:            true !default;  // was false
$enable-gradients:          true !default;  // was false
$enable-transitions:        true !default;  // was false
$enable-hover-media-query:  true !default;  // was false

The other two modifications change what the framework considers to be a small sized screen so that a large smartphone in landscape mode won't be forced to make use of the collapsing menu system in the navbar.

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 480px,                                // was 544
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
) !default;

// Grid containers // // Define the maximum width of .container for different screen sizes.

$container-max-widths: ( sm: 434px, // was 576 md: 720px, lg: 940px, xl: 1140px ) !default;

You will find two files named

in the same folder that will allow you to compare and easily copy the default and custom settings over top of

Building Bootstrap 4

Once you have it customized, you can use the main project's Grunt setup to build Bootstrap 4 and to copy the needed CSS and JS files into the main A2B4O2OM application. The build command to run is:

grunt bootstrap

Once complete, you will see any modifications you made to

(or elsewhere) reflected in
where Webpack will pick them up.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.