Skip to content

Commit

Permalink
final changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@chaitanyapotti
chaitanyapotti committed Aug 16, 2024
1 parent 2bd3101 commit b0c0ed7
Show file tree
Hide file tree
Showing 8 changed files with 257 additions and 99 deletions.
3 changes: 2 additions & 1 deletion examples/vue-app/.prettierrc.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@
printWidth: 150
singleQuote: false
semi: true
htmlWhitespaceSensitivity: ignore
trailingComma: es5
htmlWhitespaceSensitivity: ignore
97 changes: 97 additions & 0 deletions examples/vue-app/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions examples/vue-app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@
},
"dependencies": {
"@toruslabs/broadcast-channel": "10.0.1",
"@toruslabs/constants": "^14.0.0",
"@toruslabs/customauth": "file:../../",
"@toruslabs/openlogin-starkkey": "^3.2.0",
"@toruslabs/torus.js": "^15.0.2",
"@toruslabs/vue-components": "^7.8.3",
"@toruslabs/vue-icons": "^7.6.2",
"@web3auth/base": "^8.12.0",
Expand Down
107 changes: 75 additions & 32 deletions examples/vue-app/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@
:options="uxModeOptions"
/>
<Select
v-model="formData.verifier"
v-model="formData.loginProvider"
data-testid="selectUxMode"
:label="$t('app.verifier')"
:aria-label="$t('app.verifier')"
:placeholder="$t('app.verifier')"
:options="verifierOptions"
:options="formData.network === TORUS_SAPPHIRE_NETWORK.SAPPHIRE_DEVNET ? sapphireDevnetVerifierOptions : testnetVerifierOptions"
/>
<TextField
v-if="isDisplay('loginHintEmail')"
Expand Down Expand Up @@ -99,6 +99,11 @@
{{ $t("app.btnClearConsole") }}
</Button>
</div>
<div class="mb-2">
<Button block size="xs" pill data-testid="btnUserInfo" @click="printUserInfo">
{{ $t("app.btnUserInfo") }}
</Button>
</div>
<div class="mb-2">
<Button block size="xs" pill data-testid="btnSignMessage" @click="signMessage">
{{ $t("app.btnSignMessage") }}
Expand Down Expand Up @@ -177,8 +182,10 @@
</template>

<script setup lang="ts">
import { CustomAuth, LOGIN_TYPE, TorusLoginResponse, UX_MODE } from "@toruslabs/customauth";
import { TORUS_LEGACY_NETWORK, TORUS_SAPPHIRE_NETWORK } from "@toruslabs/constants";
import { CustomAuth, LoginWindowResponse, TorusLoginResponse, TorusVerifierResponse, UX_MODE } from "@toruslabs/customauth";
import { getStarkHDAccount, pedersen, sign, STARKNET_NETWORKS, verify } from "@toruslabs/openlogin-starkkey";
import { TorusKey } from "@toruslabs/torus.js";
import { Button, Card, Select, TextArea, TextField } from "@toruslabs/vue-components";
import { SafeEventEmitterProvider } from "@web3auth/base";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
Expand All @@ -202,12 +209,14 @@ import {
LOCAL_NETWORK,
networkOptions,
REDDIT,
sapphireDevnetVerifierMap,
sapphireDevnetVerifierOptions,
testnetVerifierMap,
testnetVerifierOptions,
TORUS_EMAIL_PASSWORDLESS,
TORUS_SMS_PASSWORDLESS,
TWITTER,
uxModeOptions,
verifierMap,
verifierOptions,
WEB3AUTH_CLIENT_ID,
WEIBO,
} from "./config";
Expand All @@ -217,14 +226,15 @@ const { log } = console;
const formData = ref<FormData>({
uxMode: UX_MODE.REDIRECT,
verifier: GOOGLE,
loginProvider: GOOGLE,
loginHint: "",
network: "sapphire_devnet",
network: TORUS_SAPPHIRE_NETWORK.SAPPHIRE_DEVNET,
provider: null,
});
const customAuthSdk = ref<CustomAuth | null>(null);
const privKey = ref<string | undefined>("");
const userInfo = ref<(TorusVerifierResponse & LoginWindowResponse) | null>(null);
const provider = ref<SafeEventEmitterProvider | null>(null);
const signedMessage = ref<ec.Signature | null>(null);
const signingMessage = ref<string | null>(null);
Expand All @@ -234,24 +244,35 @@ const starkAccountIndex = ref<number | undefined>(0);
const validateAccountIndex = ref<number | undefined>(0);
const isDisplay = (name: string): boolean => {
log(formData.value.verifier, "name");
switch (name) {
case "loginForm":
return !privKey.value;
case "btnLogout":
case "appHeading":
return !!privKey.value;
case "loginHintEmail":
return formData.value.verifier === TORUS_EMAIL_PASSWORDLESS;
return formData.value.loginProvider === TORUS_EMAIL_PASSWORDLESS;
case "loginHintPhone":
return formData.value.verifier === TORUS_SMS_PASSWORDLESS;
return formData.value.loginProvider === TORUS_SMS_PASSWORDLESS;
default: {
return true;
}
}
};
const verifierMap = computed(() => {
const { network } = formData.value;
switch (network) {
case TORUS_SAPPHIRE_NETWORK.SAPPHIRE_DEVNET:
return sapphireDevnetVerifierMap;
case TORUS_LEGACY_NETWORK.TESTNET:
return testnetVerifierMap;
default:
return sapphireDevnetVerifierMap;
}
});
const loginToConnectionMap = computed((): Record<string, Record<string, string | boolean>> => {
const login_hint = formData.value.loginHint;
return {
Expand Down Expand Up @@ -282,9 +303,11 @@ const loginToConnectionMap = computed((): Record<string, Record<string, string |
},
};
});
const loadPrivKey = (loginResponse: TorusLoginResponse) => {
privKey.value = loginResponse.finalKeyData.privKey;
localStorage.setItem("privKey", privKey.value as string);
const loadResponse = (privKeyInfo: TorusKey["finalKeyData"], localUserInfo: TorusVerifierResponse & LoginWindowResponse) => {
privKey.value = privKeyInfo?.privKey;
userInfo.value = localUserInfo;
if (privKey.value) localStorage.setItem("privKey", privKey.value as string);
if (userInfo.value) localStorage.setItem("userInfo", JSON.stringify(userInfo.value));
};
const initCustomAuth = async () => {
const { network, uxMode } = formData.value;
Expand Down Expand Up @@ -334,29 +357,43 @@ const setProvider = async () => {
};
const onLogin = async () => {
const { verifier: selectedVerifier } = formData.value;
const { loginProvider: selectedLoginProvider } = formData.value;
if (!customAuthSdk.value) return;
const jwtParams = loginToConnectionMap.value[selectedVerifier] || {};
const { typeOfLogin, clientId, verifier } = verifierMap[selectedVerifier] as { typeOfLogin: LOGIN_TYPE; clientId: string; verifier: string };
const jwtParams = loginToConnectionMap.value[selectedLoginProvider] || {};
const { typeOfLogin, clientId, verifier } = verifierMap.value[selectedLoginProvider];
let privKeyInfo: TorusKey["finalKeyData"];
let localUserInfo: TorusVerifierResponse & LoginWindowResponse;
const loginDetails = await customAuthSdk.value.triggerLogin({
typeOfLogin,
verifier,
clientId,
jwtParams,
customState: {
client: "great-company",
webauthnURL: "https://d1f8-115-66-172-125.ngrok.io/",
localhostAll: "true",
webauthnTransports: "ble",
credTransports: "ble",
},
});
if (formData.value.network === TORUS_LEGACY_NETWORK.TESTNET) {
const data = await customAuthSdk.value.triggerLogin({
typeOfLogin,
verifier,
clientId,
jwtParams,
});
privKeyInfo = data?.finalKeyData;
localUserInfo = data?.userInfo;
} else {
const data = await customAuthSdk.value.triggerAggregateLogin({
aggregateVerifierType: "single_id_verifier",
subVerifierDetailsArray: [
{
clientId,
typeOfLogin,
verifier: "web3auth",
jwtParams,
},
],
verifierIdentifier: verifier,
});
privKeyInfo = data?.finalKeyData;
localUserInfo = data?.userInfo[0];
}
if (loginDetails) {
loadPrivKey(loginDetails);
if (privKeyInfo) {
loadResponse(privKeyInfo, localUserInfo);
}
};
Expand Down Expand Up @@ -385,13 +422,15 @@ const init = async () => {
await initCustomAuth();
if (localStorage.getItem("privKey")) {
privKey.value = localStorage.getItem("privKey") as string;
userInfo.value = JSON.parse(localStorage.getItem("userInfo") as string);
return;
}
const { uxMode } = formData.value;
try {
if (uxMode === UX_MODE.REDIRECT) {
const loginDetails = await customAuthSdk.value?.getRedirectResult();
loadPrivKey(loginDetails?.result as TorusLoginResponse);
const response = loginDetails?.result as TorusLoginResponse;
if (response) loadResponse(response.finalKeyData, response.userInfo);
}
} catch (error) {
log(error);
Expand Down Expand Up @@ -429,6 +468,10 @@ const printConsole = (...args: unknown[]): void => {
}
};
const printUserInfo = () => {
printConsole("User Info", { userInfo: userInfo.value, privKey: privKey.value });
};
const signMessage = async () => {
const signedMessageR = await signEthMessage(provider.value as SafeEventEmitterProvider);
printConsole("Signed Message", signedMessageR);
Expand Down
Loading

0 comments on commit b0c0ed7

Please sign in to comment.