jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Test: Google oauth

Browse Source
This commit is contained in:
Kamigen
2024-04-20 23:11:20 -04:00
parent 4b1989587c
commit ec32a525a9
9 changed files with 68 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.development
View File

@@ -1 +1,2 @@
VITE_API_URL=https://localhost:5001/
VITE_GOOGLE_CLIENT_ID=468391910875-78sfopq1t12ulrv4f5vj227j45guuj66.apps.googleusercontent.com

1
.env.production
View File

@@ -1 +1,2 @@
VITE_API_URL=todo
VITE_GOOGLE_CLIENT_ID=468391910875-78sfopq1t12ulrv4f5vj227j45guuj66.apps.googleusercontent.com

9
package-lock.json generated
View File

@@ -14,6 +14,7 @@
"pinia": "^2.1.7",
"vue": "^3.4.15",
"vue-router": "^4.2.5",
"vue3-google-login": "^2.0.26",
"vuetify": "^3.5.6"
},
"devDependencies": {
@@ -3479,6 +3480,14 @@
"vue": "^3.2.0"
}
},
"node_modules/vue3-google-login": {
"version": "2.0.26",
"resolved": "https://registry.npmjs.org/vue3-google-login/-/vue3-google-login-2.0.26.tgz",
"integrity": "sha512-BuTSIeSjINNHNPs+BDF4COnjWvff27IfCBDxK6JPRqvm57lF8iK4B3+zcG8ud6BXfZdyuiDlxletbEDgg4/RFA==",
"peerDependencies": {
"vue": "^3.0.3"
}
},
"node_modules/vuetify": {
"version": "3.5.6",
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.5.6.tgz",

3
package.json
View File

@@ -15,6 +15,7 @@
"pinia": "^2.1.7",
"vue": "^3.4.15",
"vue-router": "^4.2.5",
"vue3-google-login": "^2.0.26",
"vuetify": "^3.5.6"
},
"devDependencies": {
@@ -26,4 +27,4 @@
"tailwindcss": "^3.4.1",
"vite": "^5.0.11"
}
}
}

4
src/main.js
View File

@@ -9,6 +9,7 @@ import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import clientPlugin from './plugins/api.js'
import vueGoogleOauth from 'vue3-google-login'
const vuetify = createVuetify({
components,
@@ -20,6 +21,9 @@ const app = createApp(App);
// Create an axios client preconfigured to the Hutopy API.
app.use(clientPlugin);
app.use(vueGoogleOauth, {
clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID,
})
app.use(createPinia());
app.use(vuetify);
app.use(router);

65
src/stores/auth.js
View File

@@ -4,47 +4,64 @@ const baseUrl = '/api/Users';
export const auth = defineStore({
id: 'auth',
state: () => ({
user: null,
refreshTokenTimeout: null
user: "",
refreshTokenTimeout: 0
}),
actions: {
async googleLogin(client, idToken) {
const response = await client.post("https://people.googleapis.com/v1/people/me", {
headers: {
"Authorization": "Bearer " + idToken
}
})
this.user = {
accessToken: response.data.accessToken,
refreshToken: response.data.refreshToken,
email: response.data.email
}
localStorage.setItem('jwt', this.user.accessToken);
this.startRefreshTokenTimer();
},
async login(client, email, password) {
const requestBody = {
email: email,
password: password
};
try {
const response = await client.post(`${baseUrl}/login`, requestBody)
this.user = {
accessToken: response.data.accessToken,
refreshToken: response.data.refreshToken,
email: email
}
localStorage.setItem('jwt', this.user.accessToken);
this.startRefreshTokenTimer();
} catch (error) {
throw new Error('Login failed.')
const response = await client.post(`${baseUrl}/login`, requestBody)
this.user = {
accessToken: response.data.accessToken,
refreshToken: response.data.refreshToken,
email: email
}
},
logout() {
localStorage.setItem('jwt', '');
this.stopRefreshTokenTimer();
this.user = null;
},
async refreshToken(client) {
const response = await client.post(`${baseUrl}/refresh`, {});
this.user.accessToken = response.accessToken;
localStorage.setItem('jwt', this.user.accessToken);
this.startRefreshTokenTimer();
},
logout() {
localStorage.setItem('jwt', '');
this.user = null;
this.stopRefreshTokenTimer();
},
async refreshToken(client) {
const response = await client.post(`${baseUrl}/refresh`);
this.user.accessToken = response.accessToken;
localStorage.setItem('jwt', this.user.accessToken);
this.startRefreshTokenTimer();
},
startRefreshTokenTimer() {
const timeout = 50 * 1000;
this.refreshTokenTimeout = setTimeout(this.refreshToken, timeout);
},
stopRefreshTokenTimer() {
clearTimeout(this.refreshTokenTimeout);
}

9
src/views/LoginView.vue
View File

@@ -1,5 +1,9 @@
<template>
<v-app style="background-color: #f4f4f4;">
<!-- Google Oauth -->
<GoogleLogin :callback="googleCallback" popup-type="TOKEN">
<button>Login Using Google</button>
</GoogleLogin>
<div class="sm:flex hidden items-center justify-between flex-col"
style="background-color: #f4f4f4; margin-top: 3%;">
@@ -101,6 +105,7 @@ import {auth} from '@/stores/auth.js';
import {ref} from 'vue';
import {useRouter} from 'vue-router';
import {useClient} from "@/plugins/api.js";
import {decodeCredential} from 'vue3-google-login'
const api = useClient()
@@ -119,6 +124,10 @@ async function login() {
}
}
const googleCallback = (response) => {
console.log(response)
//store.loginWithGoogle(api, credential)
}
</script>
<style scoped>

2
src/views/main/CreatorFolio.vue
View File

@@ -1218,4 +1218,4 @@ let items = [
}
</style>
</style>

1
src/views/main/HomeView.vue
View File

@@ -8,7 +8,6 @@
<v-container class="d-flex justify-center align-center">
<div style="margin-left: 20%;">
<v-row>
<img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
<RouterLink :to="{ name: 'login' }">
<v-btn size="large"