8000 vue authentication google oauth · wpcodevo/vue_auth@bee0cfd · GitHub
[go: up one dir, main page]
Skip to content

Commit bee0cfd

Browse files
wpcodevowpcodevo
committed
vue authentication google oauth
0 parents  commit bee0cfd

File tree

16 files changed

+581
-0
lines changed

16 files changed

+581
-0
lines changed

‎.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎.vscode/extensions.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["Vue.volar"]
3+
}

‎README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Vue 3 + Vite
2+
3+
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4+
5+
## Recommended IDE Setup
6+
7+
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

‎example.env

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
VITE_SERVER_ENDPOINT=http://localhost:8000
2+
3+
VITE_GOOGLE_OAUTH_CLIENT_ID=
4+
VITE_GOOGLE_OAUTH_CLIENT_SECRET=
5+
VITE_GOOGLE_OAUTH_REDIRECT=http://localhost:8000/api/sessions/oauth/google

‎index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link
8+
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&family=Roboto:wght@400;500;700&display=swap"
9+
rel="stylesheet"
10+
/>
11+
<title>Vite App</title>
12+
</head>
13+
<body>
14+
<div id="app"></div>
15+
<script type="module" src="/src/main.js"></script>
16+
</body>
17+
</html>

‎package.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "vue-auth",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"vue": "^3.2.25"
12+
},
13+
"devDependencies": {
14+
"@vitejs/plugin-vue": "^2.3.3",
15+
"vite": "^2.9.9"
16+
}
17+
}

‎public/favicon.ico

4.19 KB
Binary file not shown.

‎src/App.vue

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<script setup>
2+
import GoogleLogo from './assets/google.svg';
3+
import { getGoogleUrl } from './utils/getGoogleUrl';
4+
5+
const from = '/';
6+
</script>
7+
8+
<template>
9+
<div class="container">
10+
<div class="social-auth">
11+
<a :href="getGoogleUrl(from)" class="google-auth">
12+
<img :src="GoogleLogo" alt="Google Logo" />
13+
<span>Google</span>
14+
</a>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<style>
20+
* {
21+
margin: 0;
22+
padding: 0;
23+
box-sizing: border-box;
24+
}
25+
a {
26+
text-decoration: none;
27+
color: inherit;
28+
}
29+
30+
html {
31+
font-size: 62.5%;
32+
}
33+
34+
body {
35+
font-family: Roboto, sans-serif;
36+
color: #222;
37+
font-size: 1.6rem;
38+
}
39+
40+
.container {
41+
background-color: #2363eb;
42+
height: 100vh;
43+
width: 100vw;
44+
display: flex;
45+
align-items: center;
46+
justify-content: center;
47+
}
48+
49+
.social-auth {
50+
max-width: 27rem;
51+
width: 100%;
52+
display: flex;
53+
align-items: center;
54+
flex-direction: column;
55+
}
56+
57+
.google-auth {
58+
background-color: #fff;
59+
border-radius: 5px;
60+
padding: 0.6rem 0;
61+
width: 100%;
62+
display: flex;
63+
align-items: center;
64+
justify-content: center;
65+
transition: all 0.3s ease-in-out;
66+
}
67+
68+
.google-auth img {
69+
height: 4rem;
70+
margin-right: 1rem;
71+
}
72+
.google-auth span {
73+
font-size: 1.8rem;
74+
}
75+
76+
.google-auth:hover {
77+
box-shadow: 0 1px 13px 0 rgb(0 0 0 / 15%);
78+
}
79+
</style>

‎src/assets/github.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/assets/google.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/assets/logo.png

6.69 KB
Loading

‎src/components/HelloWorld.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
defineProps({
5+
msg: String
6+
})
7+
8+
const count = ref(0)
9+
</script>
10+
11+
<template>
12+
<h1>{{ msg }}</h1>
13+
14+
<p>
15+
Recommended IDE setup:
16+
<a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
17+
+
18+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
19+
</p>
20+
21+
<p>
22+
<a href="https://vitejs.dev/guide/features.html" target="_blank">
23+
Vite Documentation
24+
</a>
25+
|
26+
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
27+
</p>
28+
29+
<button type="button" @click="count++">count is: {{ count }}</button>
30+
<p>
31+
Edit
32+
<code>components/HelloWorld.vue</code> to test hot module replacement.
33+
</p>
34+
</template>
35+
36+
<style scoped>
37+
a {
38+
color: #42b983;
39+
}
40+
</style>

‎src/main.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
4+
createApp(App).mount('#app')

‎src/utils/getGoogleUrl.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export const getGoogleUrl = (from) => {
2+
const rootUrl = `https://accounts.google.com/o/oauth2/v2/auth`;
3+
4+
const options = {
5+
redirect_uri: import.meta.env.VITE_GOOGLE_OAUTH_REDIRECT,
6+
client_id: import.meta.env.VITE_GOOGLE_OAUTH_CLIENT_ID,
7+
access_type: 'offline',
8+
response_type: 'code',
9+
prompt: 'consent',
10+
scope: [
11+
'https://www.googleapis.com/auth/userinfo.profile',
12+
'https://www.googleapis.com/auth/userinfo.email',
13+
].join(' '),
14+
state: from,
15+
};
16+
17+
const qs = new URLSearchParams(options);
18+
19+
return `${rootUrl}?${qs.toString()}`;
20+
};

‎vite.config.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { defineConfig } from 'vite';
2+
import vue from '@vitejs/plugin-vue';
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()],
7+
define: {
8+
'process.env': process.env,
9+
},
10+
});

0 commit comments

Comments
 (0)
0