Feat #2334 github and google auth open in new tab

[ritiksharmarj]

Fixes #2334

Changes: Added a new target prop in the button component. If we want to use the same in the future we can use target prop.

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[lindapaiste]

This code looks good, but I suspect that the issue is more complicated than just opening a new window?

Let's say that I start working on a sketch in window A. I click the SocialAuthButton which opens a new window (window B) where I connect to Google or Github. Once connected, I'll be logged in on window B. But I still won't be logged in on window A, right? Will window B have the contents of the sketch that I was working on?

I think that we probably want to keep it in the same window but we need to keep track of the unsaved sketch so that we don't lose it when the page reloads. I think there may be something in the code already regarding localStorage?

[ritiksharmarj]

This sounds right. I have checked the codesandbox to see what they're doing for this to keep track of the code before sign in. They store the code in the local storage. I'll look at it this weekend.

Is there anything in the code that I should be aware of before starting work on it?

[lindapaiste]

@ritiksharmarj We have some utilities in a file https://github.com/processing/p5.js-web-editor/blob/develop/client/persistState.js, but this is never actually used because we do not call the persistState action anywhere at the moment.

It might help to look at #334 where that code was introduced. I looked through some of the Git histories and found that we deleted the persistState() call in #1649.

Maybe all that we need to do is call dispatch(persistState()) when the auth buttons are clicked?

[lindapaiste]

@ritiksharmarj I'm going to close this PR since this isn't the approach that we want to use. Feel free to open a new a PR if you want to try fixing it a different way.

[vivekbopaliya]

is this all we would want? @lindapaiste

<StyledButton
        iconBefore={<ServiceIcon aria-label={ariaLabel} />}
        href={authUrls[service]}
        onClick={() => dispatch(persistState())}
      >
        {connectLabel}
</StyledButton>