Skip to content

Commit 4d87118

Browse files
committed
Integrate GitHub auth
1 parent ed9575b commit 4d87118

File tree

5 files changed

+101
-0
lines changed

5 files changed

+101
-0
lines changed

src/components/auth/Login.vue

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<div>
3+
<div>
4+
<v-layout justify-center>
5+
<i class="fab fa-github-square i-github"></i>
6+
</v-layout>
7+
</div>
8+
<v-btn class="btn-login" v-if="!isLoading" outline @click="login">Login with GitHub</v-btn>
9+
<v-btn class="btn-login" v-if="isLoading" outline>
10+
<img src="@/assets/loaders/bars.svg" alt="loading...">
11+
</v-btn>
12+
</div>
13+
</template>
14+
15+
<script>
16+
import axios from 'axios';
17+
import AuthHelper from '../../config/AuthHelper';
18+
import AxiosHelper from '../../config/AxiosHelper';
19+
20+
export default {
21+
name: 'Login',
22+
data() {
23+
return {
24+
isLoading: false
25+
};
26+
},
27+
methods: {
28+
login() {
29+
window.location = `${AxiosHelper.authUrl}?client_id=${
30+
AuthHelper.clientId
31+
}&scope=user%20repo%20read:org`;
32+
}
33+
},
34+
created() {
35+
const code = window.location.href.match(/\?code=(.*)/);
36+
if (code) {
37+
this.isLoading = true;
38+
axios
39+
.get(`${AxiosHelper.gatekeeperUrl}/${code[1].slice(0, 20)}`)
40+
.then(res => {
41+
this.isLoading = false;
42+
localStorage.setItem('token', res.data.token);
43+
window.location = AxiosHelper.homeUrl;
44+
})
45+
.catch(err => {
46+
this.isLoading = false;
47+
console.log(err);
48+
});
49+
}
50+
}
51+
};
52+
</script>
53+
54+
<style lang="scss" scoped>
55+
.i-github {
56+
font-size: 64px;
57+
}
58+
59+
.btn-login {
60+
width: 170px;
61+
}
62+
</style>

src/config/AuthHelper.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
clientId: '6e3411068f99256a5ff3'
3+
};

src/config/AxiosHelper.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
baseUrl: 'https://api.github.com',
3+
authUrl: 'https://github.com/login/oauth/authorize',
4+
gatekeeperUrl: 'https://gatekeeper-oauth.herokuapp.com/authenticate',
5+
homeUrl: 'http://prabhani.me/Codebadge/#/home'
6+
};

src/services/authService.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default class AuthService {
2+
isLoggedIn() {
3+
return !!localStorage.getItem('token');
4+
}
5+
6+
getToken() {
7+
return localStorage.getItem('token');
8+
}
9+
}

src/views/AuthView.vue

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div>
3+
<v-layout class="ma-5" justify-center>
4+
<Login/>
5+
</v-layout>
6+
</div>
7+
</template>
8+
9+
<script>
10+
import Login from '../components/auth/Login';
11+
12+
export default {
13+
name: 'AuthView',
14+
components: {
15+
Login
16+
}
17+
};
18+
</script>
19+
20+
<style lang="scss" scoped>
21+
</style>

0 commit comments

Comments
 (0)