How to implement a sign-in button of Google and Facebook in a Google AMP?

I want to create a simple "sign-in" button of Facebook and Google.

I read the documentation (https://amp.dev/documentation/examples/personalization/oauth2_login/#setup) and look at the example in the playground section, but my problem is how do I do this part

"facebook-sign-in": "https://ampbyexample.com/oauth/login/facebook",
"google-sign-in": "https://ampbyexample.com/oauth/login/google",

in example of AMP documentation:

<script id="amp-access" type="application/json">
    {
        "authorization": "https://ampbyexample.com/oauth/status?_=RANDOM",
        "noPingback": "true",
        "login": {
          "facebook-sign-in":"https://ampbyexample.com/oauth/login/facebook",
          "google-sign-in":"https://ampbyexample.com/oauth/login/google",
          "github-sign-in":"https://ampbyexample.com/oauth/login/github",
          "sign-out":"https://ampbyexample.com/oauth/logout"
        },
        "authorizationFallbackResponse": {
            "error": true,
            "loggedIn": false
        }
    }
</script>

What do I do inside of this file https://ampbyexample.com/oauth/login/facebook in my application? what do I need to do it? I'm so confused about this part.

EDIT I found this example but how make this logic with facebook without open a new pop up inside of amp's popup? (https://developers.facebook.com/docs/facebook-login/web) about this example, my login button just stay inside of amp popup... but my expected result is like this example here

Solution

Sign-in with amp-access will always open a new popup. This is to ensure that it's always possible to write first party cookies on your own origin, even if the AMP pages is served from an AMP cache.