├── .browserslistrc
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── shims-vue.d.ts
    ├── assets
    │   ├── logo.png
    │   └── logo.svg
    ├── views
    │   ├── About.vue
    │   └── Home.vue
    ├── shims-vuetify.d.ts
    ├── plugins
    │   ├── vuetify.ts
    │   └── msal-plugin.ts
    ├── shims-tsx.d.ts
    ├── api
    │   └── daveco-api.ts
    ├── main.ts
    ├── router
    │   └── index.ts
    └── App.vue
├── .gitignore
├── .env
├── vue.config.js
├── .eslintrc.js
├── README.md
├── tsconfig.json
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AspNetMonsters/vue-azure-b2c-sample/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import Vue from 'vue'
3 |   export default Vue
4 | }
5 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AspNetMonsters/vue-azure-b2c-sample/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/shims-vuetify.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'vuetify/lib/framework' {
2 |   import Vuetify from 'vuetify'
3 |   export default Vuetify
4 | }
5 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Vuetify from 'vuetify/lib/framework';
3 | 
4 | Vue.use(Vuetify);
5 | 
6 | export default new Vuetify({
7 | });
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | VUE_APP_MSAL_CLIENT_ID=bcb8bd6e-e953-4c5d-9577-0bc414eaf38a
2 | VUE_APP_MSAL_LOGIN_AUTHORITY=https://davecob2cc.b2clogin.com/davecob2cc.onmicrosoft.com/B2C_1_signupsignin/
3 | VUE_APP_MSAL_PASSWORD_RESET_AUTHORITY=https://davecob2cc.b2clogin.com/davecob2cc.onmicrosoft.com/B2C_1_PasswordReset/
4 | VUE_APP_MSAL_KNOWN_AUTHORITY=davecob2cc.b2clogin.com
5 | 


--------------------------------------------------------------------------------
/src/shims-tsx.d.ts:
--------------------------------------------------------------------------------
 1 | import Vue, { VNode } from 'vue'
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     // tslint:disable no-empty-interface
 6 |     interface Element extends VNode {}
 7 |     // tslint:disable no-empty-interface
 8 |     interface ElementClass extends Vue {}
 9 |     interface IntrinsicElements {
10 |       [elem: string]: any;
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "devServer": {
 3 |     proxy: {
 4 |       '/api': {
 5 |         target: 'http://localhost:7071', // Use 'https://localhost:5001' for the ASP.NET Core backend
 6 |         logLevel: 'debug',
 7 |         ignorePath: false,
 8 |         ws: true
 9 |       }
10 |     },
11 |   },
12 |   "transpileDependencies": [
13 |     "vuetify"
14 |   ]
15 | }


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended',
 9 |     '@vue/typescript/recommended'
10 |   ],
11 |   parserOptions: {
12 |     ecmaVersion: 2020
13 |   },
14 |   rules: {
15 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
17 |     'interface-name': 'off'
18 |   },
19 | }
20 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/api/daveco-api.ts:
--------------------------------------------------------------------------------
 1 | import { msalPluginInstance } from "@/plugins/msal-plugin";
 2 | 
 3 | class DaveCoApi {
 4 |     async getSuperSecretThings(): Promise<any[]> {
 5 |         const accessToken = await msalPluginInstance.acquireToken();
 6 |         const response = await fetch('/api/secret/', {
 7 |             headers: {
 8 |                 authorization: `Bearer ${accessToken}`
 9 |             }
10 |         });
11 |         if (response.ok){
12 |             return await response.json();
13 |         } else {
14 |             return [];
15 |         }
16 |     }
17 | }
18 | 
19 | 
20 | export default new DaveCoApi();


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import vuetify from './plugins/vuetify';
 5 | import { MsalPlugin, MsalPluginOptions } from './plugins/msal-plugin';
 6 | 
 7 | Vue.config.productionTip = false;
 8 | 
 9 | 
10 | const options: MsalPluginOptions = {
11 |   clientId: process.env.VUE_APP_MSAL_CLIENT_ID,
12 |   loginAuthority:  process.env.VUE_APP_MSAL_LOGIN_AUTHORITY,
13 |   passwordAuthority: process.env.VUE_APP_MSAL_PASSWORD_RESET_AUTHORITY,
14 |   knownAuthority: process.env.VUE_APP_MSAL_KNOWN_AUTHORITY
15 | };
16 | 
17 | Vue.use(new MsalPlugin(), options);
18 | 
19 | new Vue({
20 |   router,
21 |   vuetify,
22 |   render: h => h(App)
23 | }).$mount("#app");
24 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter, { RouteConfig } from 'vue-router'
 3 | import Home from '../views/Home.vue'
 4 | 
 5 | Vue.use(VueRouter)
 6 | 
 7 | const routes: Array<RouteConfig> = [
 8 |   {
 9 |     path: '/',
10 |     name: 'Home',
11 |     component: Home
12 |   },
13 |   {
14 |     path: '/about',
15 |     name: 'About',
16 |     // route level code-splitting
17 |     // this generates a separate chunk (about.[hash].js) for this route
18 |     // which is lazy-loaded when the route is visited.
19 |     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
20 |   }
21 | ]
22 | 
23 | const router = new VueRouter({
24 |   mode: 'history',
25 |   base: process.env.BASE_URL,
26 |   routes
27 | })
28 | 
29 | export default router
30 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue with Azure B2C
 2 | 
 3 | A sample Vue application that uses Azure B2C to authenticate users. Once users are authenticated, a acccess token is used to access the API. 
 4 | 
 5 | You can use 2 separate versions of the backend. 
 6 | 
 7 | - **ASP.NET Core:** https://github.com/AspNetMonsters/aspnetcore-azure-b2c-sample 
 8 | - **Azure Functions:** https://github.com/AspNetMonsters/functions-azure-b2c-sample
 9 | 
10 | 
11 | ## Project setup
12 | ```
13 | npm install
14 | ```
15 | 
16 | ### Compiles and hot-reloads for development
17 | ```
18 | npm run serve
19 | ```
20 | 
21 | ### Compiles and minifies for production
22 | ```
23 | npm run build
24 | ```
25 | 
26 | ### Lints and fixes files
27 | ```
28 | npm run lint
29 | ```
30 | 
31 | ### Customize configuration
32 | See [Configuration Reference](https://cli.vuejs.org/config/).
33 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "experimentalDecorators": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "sourceMap": true,
14 |     "baseUrl": ".",
15 |     "types": [
16 |       "webpack-env"
17 |     ],
18 |     "paths": {
19 |       "@/*": [
20 |         "src/*"
21 |       ]
22 |     },
23 |     "lib": [
24 |       "esnext",
25 |       "dom",
26 |       "dom.iterable",
27 |       "scripthost"
28 |     ]
29 |   },
30 |   "include": [
31 |     "src/**/*.ts",
32 |     "src/**/*.tsx",
33 |     "src/**/*.vue",
34 |     "tests/**/*.ts",
35 |     "tests/**/*.tsx"
36 |   ],
37 |   "exclude": [
38 |     "node_modules"
39 |   ]
40 | }
41 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-app-bar
 4 |       app
 5 |       color="primary"
 6 |       dark
 7 |     >
 8 |       <div class="d-flex align-center">
 9 | 
10 | 
11 |         <h1>Azure B2C Sample</h1>
12 |       </div>
13 | 
14 |       <v-spacer></v-spacer>
15 |         <button v-if="!isAuthenticated" @click="signIn()">Sign In</button>
16 | 
17 |         <button v-if="isAuthenticated" @click="signOut()">Sign Out</button>
18 |     </v-app-bar>
19 | 
20 |     <v-main>
21 |       <router-view/>
22 |     </v-main>
23 |   </v-app>
24 | </template>
25 | 
26 | <script lang="ts">
27 | import { Component, Vue, Prop } from "vue-property-decorator";
28 | 
29 | @Component
30 | export default class App extends Vue {
31 |   @Prop() private msg!: string;
32 | 
33 |   public get isAuthenticated(): boolean {
34 |     return this.$msal.isAuthenticated;
35 |   }
36 | 
37 |   public async signIn() {
38 |     await this.$msal.signIn();
39 |   }
40 | 
41 |    public async signOut() {
42 |     await this.$msal.signOut();
43 |   }
44 | }
45 | </script>
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-azure-b2c-sample",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@azure/msal-browser": "^2.8.0",
12 |     "vue": "^2.6.11",
13 |     "vue-class-component": "^7.2.3",
14 |     "vue-property-decorator": "^9.1.2",
15 |     "vue-router": "^3.2.0",
16 |     "vuetify": "^2.2.11"
17 |   },
18 |   "devDependencies": {
19 |     "@typescript-eslint/eslint-plugin": "^2.33.0",
20 |     "@typescript-eslint/parser": "^2.33.0",
21 |     "@vue/cli-plugin-eslint": "~4.5.0",
22 |     "@vue/cli-plugin-router": "~4.5.0",
23 |     "@vue/cli-plugin-typescript": "~4.5.0",
24 |     "@vue/cli-service": "~4.5.0",
25 |     "@vue/eslint-config-typescript": "^5.0.2",
26 |     "eslint": "^6.7.2",
27 |     "eslint-plugin-vue": "^6.2.2",
28 |     "node-sass": "^4.12.0",
29 |     "sass": "^1.19.0",
30 |     "sass-loader": "^8.0.2",
31 |     "typescript": "~3.9.3",
32 |     "vue-cli-plugin-vuetify": "~2.0.9",
33 |     "vue-template-compiler": "^2.6.11",
34 |     "vuetify-loader": "^1.3.0"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <v-alert
 4 |       v-if="!$msal.isAuthenticated"
 5 |       class="d-flex align-center"
 6 |       border="top"
 7 |       colored-border
 8 |       type="info"
 9 |       elevation="2"
10 |     >
11 |       Welcome to Dave Co. Sign in to see our super top secret things.
12 |     </v-alert>
13 |     <v-card  v-if="$msal.isAuthenticated" class="mx-auto" elevation="2"  max-width="374">
14 |       <v-card-title>Welcome to Dave Co.!</v-card-title>
15 |       <v-card-text>
16 |         Super secret info will go here once we wire it up to call our API!
17 |         
18 |       </v-card-text>
19 |       <v-card-actions>
20 |         <v-btn @click="getSecret()">Get your secret!</v-btn>
21 |       </v-card-actions>
22 |             <v-card-text v-if="secretThing">
23 |           {{secretThing}}
24 |         
25 |       </v-card-text>
26 |     </v-card>
27 |   </v-container>
28 | </template>
29 | 
30 | <script lang="ts">
31 | import { Component, Vue } from "vue-property-decorator";
32 | import DaveCoApi from "../api/daveco-api";
33 | 
34 | @Component({
35 |   components: {},
36 | })
37 | export default class Home extends Vue {
38 | 
39 |    public secretThing: any[] = [];
40 |    
41 |    async getSecret() {
42 |      this.secretThing = await DaveCoApi.getSuperSecretThings();
43 |   }
44 | }
45 | </script>
46 | 


--------------------------------------------------------------------------------
/src/plugins/msal-plugin.ts:
--------------------------------------------------------------------------------
  1 | import * as msal from "@azure/msal-browser";
  2 | import Vue, { PluginObject, VueConstructor } from "vue";
  3 | 
  4 | declare module "vue/types/vue" {
  5 |     interface Vue {
  6 |         $msal: MsalPlugin;
  7 |     }
  8 | }
  9 | 
 10 | export interface MsalPluginOptions {
 11 |     clientId: string;
 12 |     loginAuthority: string;
 13 |     passwordAuthority: string;
 14 |     knownAuthority: string;
 15 | }
 16 | 
 17 | let msalInstance: msal.PublicClientApplication;
 18 | 
 19 | export let msalPluginInstance: MsalPlugin;
 20 | 
 21 | export class MsalPlugin implements PluginObject<MsalPluginOptions> {
 22 | 
 23 |     private pluginOptions: MsalPluginOptions = {
 24 |         clientId: "",
 25 |         loginAuthority: "",
 26 |         passwordAuthority: "",
 27 |         knownAuthority: ""
 28 |     };
 29 | 
 30 |     public isAuthenticated = false;
 31 | 
 32 | 
 33 |     public install(vue: VueConstructor<Vue>, options?: MsalPluginOptions): void {
 34 |         if (!options) {
 35 |             throw new Error("MsalPluginOptions must be specified");
 36 |         }
 37 |         this.pluginOptions = options;
 38 |         this.initialize(options);
 39 |         msalPluginInstance = this;
 40 |         vue.prototype.$msal = Vue.observable(msalPluginInstance);
 41 |     }
 42 | 
 43 |     private initialize(options: MsalPluginOptions) {
 44 |         const msalConfig: msal.Configuration = {
 45 |             auth: {
 46 |                 clientId: options.clientId,
 47 |                 authority: options.loginAuthority,
 48 |                 knownAuthorities: [options.knownAuthority]
 49 |             },
 50 |             system: {
 51 |                 loggerOptions: {
 52 |                     loggerCallback: (level: msal.LogLevel, message: string, containsPii: boolean): void => {
 53 |                         if (containsPii) {
 54 |                             return;
 55 |                         }
 56 |                         switch (level) {
 57 |                             case msal.LogLevel.Error:
 58 |                                 console.error(message);
 59 |                                 return;
 60 |                             case msal.LogLevel.Info:
 61 |                                 console.info(message);
 62 |                                 return;
 63 |                             case msal.LogLevel.Verbose:
 64 |                                 console.debug(message);
 65 |                                 return;
 66 |                             case msal.LogLevel.Warning:
 67 |                                 console.warn(message);
 68 |                                 return;
 69 |                         }
 70 |                     },
 71 |                     piiLoggingEnabled: false,
 72 |                     logLevel: msal.LogLevel.Verbose
 73 |                 }
 74 |             }
 75 |         };
 76 |         msalInstance = new msal.PublicClientApplication(msalConfig);
 77 |         this.isAuthenticated = this.getIsAuthenticated();
 78 |     }
 79 | 
 80 | 
 81 |     public async signIn() {
 82 |         try {
 83 |             const loginRequest: msal.PopupRequest = {
 84 |                 scopes: ["openid", "profile", "offline_access", "https://davecob2cc.onmicrosoft.com/bcc7d959-3458-4197-a109-26e64938a435/access_api"],
 85 |             };
 86 |             const loginResponse: msal.AuthenticationResult = await msalInstance.loginPopup(loginRequest);
 87 |             this.isAuthenticated = !!loginResponse.account;
 88 |             // do something with this?
 89 |         } catch (err) {
 90 |             // handle error
 91 |             if (err.errorMessage && err.errorMessage.indexOf("AADB2C90118") > -1) {
 92 |                 try {
 93 |                     const passwordResetResponse: msal.AuthenticationResult = await msalInstance.loginPopup({
 94 |                         scopes: ["openid", "profile", "offline_access", "https://davecob2cc.onmicrosoft.com/bcc7d959-3458-4197-a109-26e64938a435/access_api"],
 95 |                         authority: this.pluginOptions.passwordAuthority
 96 |                     });
 97 |                      this.isAuthenticated = !!passwordResetResponse.account;
 98 |                 } catch (passwordResetError) {
 99 |                     console.error(passwordResetError);
100 |                 }
101 |             } else {
102 |                 this.isAuthenticated = false;
103 |             }
104 | 
105 |         }
106 |     }
107 | 
108 |     public async signOut() {
109 |         await msalInstance.logout();
110 |         this.isAuthenticated = false;
111 |     }
112 | 
113 |     public async acquireToken() {
114 |         const request = {
115 |             account: msalInstance.getAllAccounts()[0],
116 |             scopes: ["https://davecob2cc.onmicrosoft.com/bcc7d959-3458-4197-a109-26e64938a435/access_api"]
117 |         };
118 |         try {
119 |             const response = await msalInstance.acquireTokenSilent(request);
120 |             return response.accessToken;            
121 |         } catch (error) {
122 |             if (error instanceof msal.InteractionRequiredAuthError) {
123 |                 return msalInstance.acquireTokenPopup(request).catch((popupError) => {
124 |                     console.error(popupError);
125 |                 });
126 |             }
127 |             return false;
128 |         }
129 |     }
130 | 
131 |     private getIsAuthenticated(): boolean {
132 |         const accounts: msal.AccountInfo[] = msalInstance.getAllAccounts();
133 |         return accounts && accounts.length > 0;
134 |     }
135 | }
136 | 


--------------------------------------------------------------------------------