Login with Google

Developers
1

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

5 Likes
2

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

5 Likes
3

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

3 Likes
4

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.

5

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.

image
image885×117 4.15 KB

(There’s a branch for this attempt)

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

1 Like
6

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);
		}
	};
4 Likes
7

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).

2 Likes
8

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

1 Like
9

@jamesbeadle were you able to make the web3auth work?

I’m in a similar situation and I was wondering if you were able to implement the solution?

FM

10

Hello mate, no I’m still looking into the security implications.

11

@jamesbeadle Thanks for the response.

I’ll be looking into the web3auth. I’ll let you know if I find any interesting solution!

12

Yes, I would be interested in any solution that @dfinity says is secure.

13

Hey @jamesbeadle, @ferMartz ,

Looking to streamline your app’s login process? Check out our Web3Auth SDKs – they’re super easy to set up! With our plug-and-play solution, you can integrate Google login seamlessly in just minutes. Plus, when it comes to security, we’ve got a unique approach. Web3Auth doesn’t store your keys. Instead, we divide them into multiple parts, so no single party has the complete key. It only gets reconstructed on the client side upon successful authentication. Your security is our priority. If you need a hand, I’m here to help. Join our friendly Web3Auth Community discourse and let’s make your authentication worries a thing of the past!