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!

14

@ihsraham

I implemented the modal in one of my projects and it works great. There are a few items that I couldn’t find in the we3auth documentation like how to delay the last screen in the modal (see shot below) or how to customize the close button.

I’ll hop on the Discord channel to discuss further.

IMG_4982
IMG_49821125×2436 123 KB

15

Hey @ferMartz,

If it’s convenient for you, could you please paste the link to the discourse thread here once you’ve opened it on the Web3Auth community? I’ll make sure to prioritize its resolution.

Regarding the SDK customization, the modal SDK offers limited options, including whitelabeling. If you’re looking to design the modal interface yourself while still leveraging Web3Auth for the login mechanics, the no modal SDK might be a better fit for your needs.

16

Hey @ihsraham

I’m doing few tweaks to the dapp and as soon as I have it ready I will post here the link.

Fernando

1 Like
17

Another way to do it is to use ZK proofs.

The general user flow should work like:

  1. Create a local private/public pair
  2. Login with Google (or any oauth provider) with the public key in the payload (this will return a JWT key) in their browser
  3. Send the JWT to a ZK prover to create the proof
  4. Send the proof to the canister where the proof is verified to complete authentication
18

i need help to setup web3auth.

const [web3auth, setWeb3auth] = useState(null);
const [user, setUser] = useState(null);

useEffect(() => {
    const init = async () => {
        try {
            const chainConfig = {
                chainId: '0x01',
                rpcTarget: 'https://dashboard.internetcomputer.org',
                chainNamespace: CHAIN_NAMESPACES.OTHER,
                displayName: 'Internet Computer Mainnet',
                blockExplorer: 'https://dashboard.internetcomputer.org',
                ticker: 'ICP',
                tickerName: 'Internet Computer',
            };
            const privateKeyProvider = new CommonPrivateKeyProvider({
                config: { chainConfig },
            });

            const web3authInstance = new Web3Auth({
                clientId,
                chainConfig,
                privateKeyProvider,
            });

            const openloginAdapter = new OpenloginAdapter({
                privateKeyProvider: privateKeyProvider,
            });

            web3authInstance.configureAdapter(openloginAdapter);

            await web3authInstance.initModal();
            setWeb3auth(web3authInstance);
            // console.log(web3authInstance);
            if (web3authInstance.provider) {
                const userInfo = await web3authInstance.getUserInfo();
                console.log(userInfo);
                setUser(userInfo);
            }
        } catch (error) {
            console.error("Web3Auth initialization error:", error);
        }
    };
    init();
}, []);

const login = async () => {
    if (web3auth) {
        await web3auth.connect();
        const userInfo = await web3auth.getUserInfo();
        setUser(userInfo);
    }
};

const logout = async () => {
    if (web3auth) {
        await web3auth.logout();
        setUser(null);
    }
};

now from userInfo how to get principal id for ic to transfer ckUSDC.