-
Notifications
You must be signed in to change notification settings - Fork 27
/
Login.vue
172 lines (167 loc) · 6.35 KB
/
Login.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<template>
<div class="flex flex-col justify-center items-center text-center mt-[150px]">
<div class="mb-3 text-xl font-medium">Verifier</div>
<!-- <span>verifier:</span> -->
<select v-model="selectedVerifier" class="w-full max-w-xs select select-bordered dark:border-app-gray-200">
<option :key="login" v-for="login in Object.keys(verifierMap)" :value="login">{{ verifierMap[login].name }}</option>
</select>
<select v-model="selectedNetwork" class="w-full max-w-xs select select-bordered dark:border-app-gray-200 mt-4 capitalize">
<option :key="network" v-for="network in networkList" :value="network">
{{ network.replace("_", " ") }}
</option>
</select>
<input
v-model="login_hint"
v-if="selectedVerifier === 'torus_email_passwordless'"
placeholder="Enter an email"
required
class="login-input mt-4 w-[320px] border-app-gray-400 !border"
/>
<input
v-model="login_hint"
v-if="selectedVerifier === 'torus_sms_passwordless'"
placeholder="Eg: (+{cc}-{number})"
required
class="login-input mt-4 w-[320px] border-app-gray-400 !border"
/>
<div class="my-5 flex flex-col px-6 sm:px-0 sm:flex-row gap-4 w-full sm:w-[400px]">
<button @click="login()" class="custom-btn">Login with Torus</button>
<button @click="onBack" class="custom-btn">Back</button>
</div>
<ul class="text-sm text-app-gray-700 dark:text-app-gray-200 font-normal mt-4 mb-5 px-6">
<li>
Please note that the verifiers listed in the example have
<span class="font-semibold text-app-gray-900 dark:text-white">http://localhost:3000/serviceworker/redirect</span>
configured as the redirect uri.
</li>
<li>If you use any other domains, they won't work.</li>
<li>The verifiers listed here only work with the client id's specified in example. Please don't edit them</li>
<li>The verifiers listed here are for example reference only. Please don't use them for anything other than testing purposes.</li>
</ul>
<div class="text-base text-app-gray-900 dark:text-app-gray-200 font-medium mt-4 mb-5 px-6">
Reach out to us at
<a class="text-app-primary-600 dark:text-app-primary-500 underline" href="mailto:hello@tor.us">hello@tor.us</a>
or
<a class="text-app-primary-600 dark:text-app-primary-500 underline" href="https://t.me/torusdev">telegram group</a>
to get your verifier deployed for your client id.
</div>
</div>
</template>
<script lang="ts">
import TorusSdk, { UX_MODE } from "@toruslabs/customauth";
import { defineComponent } from "vue";
import { TORUS_SAPPHIRE_NETWORK, TORUS_LEGACY_NETWORK } from "@toruslabs/constants";
import {
APPLE,
AUTH_DOMAIN,
WEB3AUTH_CLIENT_ID,
COGNITO,
COGNITO_AUTH_DOMAIN,
EMAIL_PASSWORD,
GITHUB,
HOSTED_EMAIL_PASSWORDLESS,
HOSTED_SMS_PASSWORDLESS,
LINE,
LINKEDIN,
REDDIT,
TORUS_EMAIL_PASSWORDLESS,
TORUS_SMS_PASSWORDLESS,
TWITTER,
verifierMap,
WEIBO,
LOCAL_NETWORK,
} from "../../constants";
export default defineComponent({
name: "RedirectLogin",
data() {
return {
customAuthSdk: null as TorusSdk | null,
selectedVerifier: "google",
verifierMap,
login_hint: "",
networkList: [...Object.values(TORUS_SAPPHIRE_NETWORK), ...Object.values(TORUS_LEGACY_NETWORK)],
selectedNetwork: TORUS_SAPPHIRE_NETWORK.SAPPHIRE_DEVNET,
};
},
computed: {
loginToConnectionMap(): Record<string, any> {
return {
// [GOOGLE]: { login_hint: 'hello@tor.us', prompt: 'none' }, // This allows seamless login with google
[EMAIL_PASSWORD]: { domain: AUTH_DOMAIN },
[HOSTED_EMAIL_PASSWORDLESS]: { domain: AUTH_DOMAIN, verifierIdField: "name", connection: "", isVerifierIdCaseSensitive: false },
[HOSTED_SMS_PASSWORDLESS]: { domain: AUTH_DOMAIN, verifierIdField: "name", connection: "" },
[APPLE]: { domain: AUTH_DOMAIN },
[GITHUB]: { domain: AUTH_DOMAIN },
[LINKEDIN]: { domain: AUTH_DOMAIN },
[TWITTER]: { domain: AUTH_DOMAIN },
[WEIBO]: { domain: AUTH_DOMAIN },
[LINE]: { domain: AUTH_DOMAIN },
[COGNITO]: { domain: COGNITO_AUTH_DOMAIN, identity_provider: "Google", response_type: "token", user_info_endpoint: "userInfo" },
[REDDIT]: { domain: AUTH_DOMAIN, connection: "Reddit", verifierIdField: "name", isVerifierIdCaseSensitive: false },
[TORUS_EMAIL_PASSWORDLESS]: {
domain: "https://develop-passwordless.web3auth.io",
verifierIdField: "name",
isVerifierIdCaseSensitive: false,
login_hint: this.login_hint,
connection: "email",
},
[TORUS_SMS_PASSWORDLESS]: {
domain: "https://develop-passwordless.web3auth.io",
verifierIdField: "name",
login_hint: this.login_hint,
connection: "sms",
},
};
},
},
// async mounted() {
// const customAuthSdk = new TorusSdk({
// baseUrl: location.origin,
// redirectPathName: "auth",
// enableLogging: true,
// uxMode: UX_MODE.REDIRECT,
// network: this.selectedNetwork,
// web3AuthClientId: WEB3AUTH_CLIENT_ID,
// });
// this.customAuthSdk = customAuthSdk;
// await customAuthSdk.init({ skipSw: true });
// },
methods: {
async login() {
const customAuthSdk = new TorusSdk({
baseUrl: location.origin,
redirectPathName: "auth",
enableLogging: true,
uxMode: UX_MODE.REDIRECT,
network: this.selectedNetwork,
web3AuthClientId: WEB3AUTH_CLIENT_ID,
});
this.customAuthSdk = customAuthSdk;
localStorage.setItem(LOCAL_NETWORK, this.selectedNetwork);
await customAuthSdk.init({ skipSw: true });
if (!this.customAuthSdk) return;
const jwtParams = this.loginToConnectionMap[this.selectedVerifier] || {};
const { typeOfLogin, clientId, verifier } = verifierMap[this.selectedVerifier];
return this.customAuthSdk.triggerLogin({
typeOfLogin,
verifier,
clientId,
jwtParams,
customState: {
client: "great-company",
webauthnURL: "https://d1f8-115-66-172-125.ngrok.io/",
localhostAll: "true",
webauthnTransports: "ble",
credTransports: "ble",
},
});
},
onBack() {
this.$router.push("/");
},
},
});
</script>
<style scoped>
@import "./Auth.css";
</style>