Flask App Login with Google
Tags: webdev, python, beginners, programming
Published: 2022-02-03 14:16:50

Social authentication has one big advantage - you don't have to worry about user data, all the backend work is done for you! And almost everyone these days has a Google account so it would be really handy for your users to have this option!😊
So let's begin!

**Step 1**
First thing first you need to get your Google credentials details - Client ID and Client Secret. Go to [Google Developers](https://console.developers.google.com/apis/credentials) website and in the Credentials click on 'Create credentials. Select 'OAuth client ID'. 👇 
![Google credentials](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4q7u354tyh7d4go864vl.png)

You may have to create OAuth Consent Screen. Just enter your Flask app name and your email address in the user support & developer email and click 'Save and continue'.

![OAuth consent screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqjjdwqas75a42ncsky0.png)

After that go back to credentials tab and edit your OAuth Client ID. Add new authorized URI to redirect your logins through:
![Authorized redirect URIs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5ojqywlwqhp2ja51kb8.png)
And we're done! Now let's create our app!

**Step 2**
Run the following in your command line:
`pip install -U Flask Authlib requests`

Create new folder for your app and open it in your favorite IDE:

```
mkdir flask-google-login
cd flask-google-login
code .
```

**Step 3**
In your project directory create new folder `templates` and in this folder create` index.html`:

```html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles.css') }}">
	<title>Flask app</title>
</head>
<body>
        <div align="center">
            <a href="google/" class="login-btn" style="text-decoration:none;">
                <img id="google" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2048px-Google_%22G%22_Logo.svg.png"
            alt="Google"
            style="width:50px;height:50px;">
            <div class="btn-text">
                Login with Google
            </div>
            </a> 
        </div>
</body>
</html>

```
Also in the working directory create another folder `static` and add `styles.css` file:

```css
.login-btn {
    justify-content: center;
    flex-direction: row;
    display: flex;
    background-color: rgb(255, 255, 255);
    justify-content: center;
    align-items: center;
    width: 220px;
    padding: 10px;
    box-shadow: 3px 3px 3px rgb(170, 170, 170);
    border-radius: 15px;
}
.btn-text {
    justify-content: center;
    padding: 10px;
    font-family: 'Poppins', sans-serif;
    color: rgb(85, 85, 85);
}
```

**Step 4**
In the main working directory create `app.py` file:

```python
from flask import Flask, render_template, url_for, redirect
from authlib.integrations.flask_client import OAuth
import os

 
app = Flask(__name__)
app.secret_key = os.urandom(12)

oauth = OAuth(app)
 
@app.route('/')
def index():
    return render_template('index.html')
```
To be able to authorize our users we need to create an unique secret key. to do that we simply use 12 randomly generated characters.
After that we will create the index function that will render our `index.html` page.

**Step 5**
Then we will create two functions that will handle authentication with Google. To get your Google Client ID and Secret go to [Google Credentials](https://console.developers.google.com/apis/credentials) click on the download icon and cope your credentials!
```python
@app.route('/google/')
def google():
   
    GOOGLE_CLIENT_ID = 'YOUR GOOGLE CLIENT ID'
    GOOGLE_CLIENT_SECRET = 'YOUR GOOGLE CLIENT SECRET'

    CONF_URL = 'https://accounts.google.com/.well-known/openid-configuration'
    oauth.register(
        name='google',
        client_id=GOOGLE_CLIENT_ID,
        client_secret=GOOGLE_CLIENT_SECRET,
        server_metadata_url=CONF_URL,
        client_kwargs={
            'scope': 'openid email profile'
        }
    )
     
    # Redirect to google_auth function
    redirect_uri = url_for('google_auth', _external=True)
    print(redirect_uri)
    return oauth.google.authorize_redirect(redirect_uri)
 
@app.route('/google/auth/')
def google_auth():
    token = oauth.google.authorize_access_token()
    user = oauth.google.parse_id_token(token)
    print(" Google User ", user)
    return redirect('/')
```
 After all this run your app and go to `http://localhost:5000/` and you should be able to see something like this:
![Google Login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7adv7yi84aexjptl1u2.png)
After clicking on the button you will be redirected to the Google Login page:
![Google Login page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9mnmy3hscofwzlwzmop.png)
That's it! Hope you liked it and happy coding!😀