feat: add new link with phone option

[fm1randa]

Implement the new Whatsapp Web feature to link with phone number

Description

• Added LinkingMethod.js - A class that will model the configuration object to choose to link with a QR code or phone number.

index.js

• Added LinkingMethod.

index.d.ts

• Deprecated qrMaxRetries.
• Updated JSDoc for qr event.
• Added JSDoc for the new code event and the new linkingMethod property.
• Added LinkingMethod class

src/Client.js

• Added logic to handle linkingMethod

src/util/Constants.js

• Added CODE_RECEIVED event.

tests/client.js

• Added 2 new test cases to cover linkingMethod paths.

Related Issue

closes #2302, closes #2624, closes #1787, closes #2537

Motivation and Context

Implement the new feature to link with phone number.

How Has This Been Tested

Tested running npm run shell and npm test. Some tests are failing, but I've confirmed that they're failing on the main branch too.

Types of changes

• [ ] Dependency change
• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [x] Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• [x] My code follows the code style of this project.
• [x] I have updated the documentation accordingly (index.d.ts).

[tofers]

The things that matter to me are.

1. Switching between the two in a running Puppeteer (without restarting the client) by number and back again
2. Entering a phone number after starting the client.
3. Changing the phone number (in case of its erroneous entry ).
4. Whether an error is handled after the codes waiting time expires

[shirser121]

Thanks you ! If there is anything i can help, please write it down

[fm1randa]

The things that matter to me are.

1. Switching between the two in a running Puppeteer (without restarting the client) by number and back again
2. Entering a phone number after starting the client.
3. Changing the phone number (in case of its erroneous entry ).
4. Whether an error is handled after the codes waiting time expires

1. My approach differs from what you expect. It's not possible to switch between the two. Also, I think it wouldn't be a thing that most users will use. IMO, you usually want to avoid playing around authentication part while automating a Whatsapp session. You want to authenticate and make your automation online as soon as possible.
2. This library doesn't support user inputs after starting the client.
3. Same answer as the above subject. You can achieve a flexible way to change the phone number (I mean, without changing the source code) by using an environment variable for it.
4. I didn't reproduce this scenario locally. The expiration time is probably too big.

cc @tofers

[tofers]

Required to be reproduced as in the original WA.

1. QR
2. Transition to the phone
3. Switch to QR

These are the basic actions in the original Whatsapp.

Restarting the puppeteer to switch methods is not the best way.

[fm1randa]

Required to be reproduced as in the original WA.

1. QR
2. Transition to the phone
3. Switch to QR

These are the basic actions in the original Whatsapp.

Restarting the puppeteer to switch methods is not the best way.

@tofers Why would you like to switch methods in runtime? Just choose QR or Code, and then it will proceed with the selected mode.

[jgarciach]

just tested the phone code linking method and works great

lgtm

[tuyuribr]

Good work!

[itscherly]

haven't been able to get the login code after being linked?

[fm1randa]

haven't been able to get the login code after being linked?

@renzhxr I'm not sure if I got your issue. Could you describe it better?

If I got your question correctly, the answer is: you won't get any code after linking.

[amiruldev20]

then how to do client.logout from this method?

[fm1randa]

then how to do client.logout from this method?

It should work normally 🤔 . Could you test it?

[NavaShield]

is there a code example on how to log in with a code instead of qr code?

[joweste]

Sorry, but I am lost. I am using your feat. I just put a phone number in .env to test. But, what events I have to expect to enter the code? Or, How do I know if I had success on connect? Could you give me a step to step to log with phone number after I do:

const  = new Client({
          linkingMethod: new LinkingMethod({
            phone: {
              number: (process.env.WWEBJS_TEST_REMOTE_ID || "").replace(
                "@c.us",
                ""
              )
            }
          }),
          authStrategy: new LocalAuth({ clientId: `wbot-${whatsapp.id}` }),
          puppeteer: {
            headless: true,
            executablePath: process.env.CHROME_BIN || undefined,
            args: [`--user-agent=${DefaultOptions.userAgent}`, ...minimal_args]
          }
        })

[itscherly]

please update according to this flow https://github.com/pedroslopez/whatsapp-web.js/pull/2509

[sourabhpatil1992]

How to use, not have any example. Please mention in the example.

[joweste]

How to use, not have any example. Please mention in the example.

I agree. Some PR take long time to merge. Maybe because we can't test because there's a leak of information.

[Davixe7]

Why isn't there a gist with an implementation example?

[kevindevm]

i want to test this, how do i do it?

[devsakae]

i want to test this, how do i do it? Why isn't there a gist with an implementation example? How to use, not have any example. Please mention in the example.

https://github.com/pedroslopez/whatsapp-web.js/issues/2587#issuecomment-1800878464

[sourabhpatil1992]

New version of Client.js is not included this feature. this cause the new update by whatsapp not working on this. And share exampe how can we use this. @fm1randa, @alechkos

[diheinsohn]

Hi, im trying to get a phone code using the following but not getting any code. What am i missing?

const client = new Client({
    linkingMethod: new LinkingMethod({
        phone: {
            number: 'xxxxxxxxxxx'
        }
    }),
    authStrategy: new LocalAuth(),
    puppeteer: {
        headless: true
    }
});

client.on('code', code => { console.log(code)});
client.initialize();

[tdee912]

this worked, thank you, although only once the code was generate

[MobCode100]

I might be in minority here, but as for me, I've encountered an issue of not being able to receive any code. So I've inspected the Client.js code and found that the CSS selectors here won't work anymore:

const LINK_WITH_PHONE_BUTTON = '[data-testid="link-device-qrcode-alt-linking-hint"]';
const PHONE_NUMBER_INPUT = '[data-testid="link-device-phone-number-input"]';
const NEXT_BUTTON = '[data-testid="link-device-phone-number-entry-next-button"]';
const CODE_CONTAINER = '[data-testid="link-with-phone-number-code-cells"]';
const GENERATE_NEW_CODE_BUTTON = '[data-testid="popup-controls-ok"]';
const LINK_WITH_PHONE_VIEW = '[data-testid="link-device-phone-number-code-view"]';

After fixing the selectors, code can be received but the 'on code' event triggered twice, getting empty code.

I've made some changes to fix both of these problems on my fork which combines this PR on top of the latest commit in main branch. Anyone can try it with npm install https://github.com/MobCode100/whatsapp-web.js.git and the below sample code:

const { Client, LinkingMethod, LocalAuth} = require('whatsapp-web.js');
const client = new Client(
    {
        linkingMethod:  new LinkingMethod({
            phone: {
                number: "+<COUNTRY CODE><PHONE NUMBER>"
            }
        }),
        puppeteer: {
            args: ['--no-sandbox'],
        },
    }
);
client.on('code', (code) => {
    console.log('CODE RECEIVED', code);
});
client.on('ready', () => {
    console.log('Client is ready!');
});
client.initialize();

Should I make a PR for this? I agree that this approach is more fragile and prone to change. An idea is to expose the underlying JavaScript function that switches the linking method, take a look at "app.$RANDOM_STRING.js".

If somehow we can override the content to expose the onClickLinkWithPhoneNumber method and attach to, for example the window object, then we can call that function anytime needed. The challenge is the script is heavily obfuscated so it's a bit more complex than the current approach.

[sourabhpatil1992]

It Working Fine...

[OrdinaryEnder]

this worked, thank you, although only once the code was generate

How did you do it, I tried many times it just doesn't fire anything

[MobCode100]

How did you do it, I tried many times it just doesn't fire anything

Can you try my solution? hopefully it'll work. I had the same issue too.

[olmello]

then how to do client.logout from this method?

How can I do logout? not works here

[olmello]

then how to do client.logout from this method?

It should work normally 🤔 . Could you test it?

I tested here.... not works.

[purpshell]

This PR will not get merged. We are abandoning the HTML element / DOM manipulation elements of WWebJS since they are the easiest to patch by WA.

We are working on pairing code functionality with the new startup flow which will allow us to to get the pairing code through moduleRaid.

[lordprana]

@PurpShell Is there an ETA for when this new pairing code functionality will go live?