Login with Google

Just wondering if anyone can point me towards any docs about implementing google authentication for OpenFPL to make it easy for people to sign up.

Since the app is free to play, I only want to require users to have an Internet Identity if they win $FPL tokens, and then they claim them by mapping their Google Auth to an IID.

I have so many ways to win $FPL during the season, adding the barrier to entry (IID) after someone has won tokens seems like a good idea.

Any pointers in the right direction appreciated.

Kind regards,
James

3 Likes

Relevant thread: How to generate delegated identity on server and send to browser - #4 by saikatdas0790

3 Likes

I guess you can use https://nfid.one/

2 Likes

So I decided to try the same route as the new Bioniq site and use Web3Auth. I now have a JWT token I can submit to the backend with my users email address. To avoid spam I need to verify these in my backend canister. Do I need to build my own JWT verification library?

After JWT token verification I’m assuming it is just a case of creating a ‘fake’ principal which can be replaced later with an IID related one.

So I spoke to Bioniq (Bob) and tried implementing web3auth as I really like their login flow but I I get conflicts with the auth.worker service that works nicely when using IID. I really want both and don’t know if there is some underlying problem with using web3auth + IID, I don’t think you can currently use both on Bioniq.

(There’s a branch for this attempt)

Next I will try NFID as per David’s suggestion, see how that goes.

for what its worth

getWeb3AuthClient() {
		const web3auth = new Web3Auth({
			web3AuthNetwork: 'mainnet',
			clientId: TORUS_CLIENT_ID,
			chainConfig: {
				chainNamespace: CHAIN_NAMESPACES.EIP155,
				chainId: '0x1',
				rpcTarget: 'https://rpc.ankr.com/eth'
			},
			uiConfig: {
				appName: '...',
				appLogo: '...,
				theme: 'auto',
				defaultLanguage: 'en',
				primaryButton: 'socialLogin'
			}
		});

		await web3auth.initModal();
		return web3auth;
	}

const signInWeb3Auth = async () => {
		setLoadingWeb3Auth(true);

		try {
			const web3Auth = await getWeb3AuthClient();

			web3Auth.loginModal.on('MODAL_VISIBILITY', (open: boolean) => {
				if (!open) {
					setLoadingWeb3Auth(false);
				}
			});

			const web3Provider = await web3Auth.connect();
			const privateKey = await web3Provider?.request<string>({ method: 'eth_private_key' });

			// We do not create a DelegationChain for Web3Auth because for some reason that doest work...
			const identity = generateIdentity(privateKey ?? '');
			await setLocalStorageItem(II_AUTH, IDENTITY, JSON.stringify(identity));
			await actorLocalStorage.set(PROVIDER, Provider.web3auth);

			await initUser(identity.getPrincipal());
		} catch (error) {
			console.log('Error on signInWeb3Auth', error);
			setLoadingWeb3Auth(false);
			errorSnackbar((error as Error).message);
		}
	};
3 Likes

A crude approach would be to associate a Google Oauth user identifier to an identity that you generate on the backend. You can then generate an identity on the backend on the fly like this:

import { Ed25519KeyIdentity } from '@dfinity/identity';

export function generateICUserIdentityString(): string {
  const key = Ed25519KeyIdentity.generate();
  return JSON.stringify(key.toJSON());
}

and then store the mapping in a database.

Then, getting the identity back from the key string is as easy as:

export function identityFromKeyString(key: string): Ed25519KeyIdentity {
  return Ed25519KeyIdentity.fromParsedJson(JSON.parse(key));
}

A caveat here is that you are in full control of your users’ identities (keys).

I assume that’s not the case with Bioniq implementation, please correct me if I am wrong.

1 Like