# google-auth
Sign in with Google.
## Installation
```bash
pip install reflex-google-auth
```
## Usage
### Create Google OAuth2 Client ID
Head over to https://console.developers.google.com/apis/credentials and sign in with the Google account that should manage the app and credential tokens.
- Click "Create Project" and give it a name. After creation the new project should be selected.
- Click "Configure Consent Screen", Choose "External", then Create.
- Enter App Name and User Support Email -- these will be shown to users when logging in
- Scroll all the way down to "Developer contact information" and add your email address, click "Save and Continue"
- Click "Add or Remove Scopes"
- Select "Email", "Profile", and "OpenID Connect"
- Click "Update", then "Save and Continue"
- Add any test users that should be able to log in during development.
- From the "Credentials" page, click "+ Create Credentials", then "OAuth client ID"
- Select Application Type: "Web Application"
- Add Authorized Javascript Origins: http://localhost, http://localhost:3000, https://example.com (prod domain must be HTTPS)
- If using custom button, add the same origins to "Authorized redirect URIs"
- Click "Save"
- Copy the OAuth "Client ID" and "Client Secret" and save it for later. Mine looks like 309209880368-4uqd9e44h7t4alhhdqn48pvvr63cc5j5.apps.googleusercontent.com
https://github.com/reflex-dev/reflex-examples/assets/1524005/af2499a6-0bda-4d60-b52b-4f51b7322fd5
### Configure Environment Variables
Set the following environment variables based on your deployment.
```bash
export GOOGLE_CLIENT_ID="309209880368-4uqd9e44h7t4alhhdqn48pvvr63cc5j5.apps.googleusercontent.com"
export GOOGLE_CLIENT_SECRET="your_client_secret"
export GOOGLE_REDIRECT_URI="http://localhost:3000"
```
### Integrate with Reflex app
The `GoogleAuthState` provided by this component has a `token_is_valid` var that
should be checked before returning any protected content.
Additionally the `GoogleAuthState.tokeninfo` dict contains the user's profile information.
```python
from reflex_google_auth import GoogleAuthState, require_google_login
class State(GoogleAuthState):
@rx.var(cache=True)
def protected_content(self) -> str:
if self.token_is_valid:
return f"This content can only be viewed by a logged in User. Nice to see you {self.tokeninfo['name']}"
return "Not logged in."
```
The convenience decorator, `require_google_login`, can wrap an existing component, and
show the "Sign in with Google" button if the user is not already authenticated. It can be
used on a page function or any subcomponent function of the page.
The "Sign in with Google" button can also be displayed via `google_login()`:
```python
from reflex_google_auth import google_login, google_oauth_provider
def page():
return rx.div(
google_oauth_provider(
google_login(),
),
)
```
To uniquely identify a user, the `GoogleAuthState.tokeninfo['sub']` field can be used.
See the example in
[masenf/rx_shout](https://github.com/masenf/rx_shout/blob/main/rx_shout/state.py)
for how to integrate an authenticated Google user with other app-specific user
data.
### Customizing the Button
If you want to use your own login button, you may use whatever component you
like, as long as it is wrapped in a `reflex_google_auth.google_oauth_provider`
component and the `on_click` triggers
`reflex_google_auth.handle_google_login()`. Note that this cannot be combined
with other event handlers.
This functionality is also exposed in the `require_google_auth` decorator, which
accepts a `button` keyword argument.
When using a custom button, the returned auth-code _must be validated on the
backend_, which is handled by this library, but **requires additionally setting
`GOOGLE_CLIENT_SECRET` and `GOOGLE_REDIRECT_URI` environment variables**. These
can be configured in the Google Cloud Console as described above.
```python
from reflex_google_auth import handle_google_login, require_google_login, GoogleAuthState
@require_google_login(button=rx.button("Google Login 🚀", on_click=handle_google_login()))
def custom_button() -> rx.Component:
return rx.vstack(
f"{GoogleAuthState.tokeninfo['email']} clicked a custom button to login, nice",
)
```
Raw data
{
"_id": null,
"home_page": null,
"name": "reflex-google-auth",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "reflex, reflex-custom-components",
"author": null,
"author_email": "Masen Furer <m_github@0x26.net>",
"download_url": "https://files.pythonhosted.org/packages/ef/9e/cb2420c6a5431ccad8ecfff1836345bf2a1e0a624d8ef62a24116c631570/reflex_google_auth-0.0.8.tar.gz",
"platform": null,
"description": "# google-auth\n\nSign in with Google.\n\n## Installation\n\n```bash\npip install reflex-google-auth\n```\n\n## Usage\n\n### Create Google OAuth2 Client ID\n\nHead over to https://console.developers.google.com/apis/credentials and sign in with the Google account that should manage the app and credential tokens.\n\n- Click \"Create Project\" and give it a name. After creation the new project should be selected.\n- Click \"Configure Consent Screen\", Choose \"External\", then Create.\n - Enter App Name and User Support Email -- these will be shown to users when logging in\n - Scroll all the way down to \"Developer contact information\" and add your email address, click \"Save and Continue\"\n - Click \"Add or Remove Scopes\"\n - Select \"Email\", \"Profile\", and \"OpenID Connect\"\n - Click \"Update\", then \"Save and Continue\"\n - Add any test users that should be able to log in during development.\n- From the \"Credentials\" page, click \"+ Create Credentials\", then \"OAuth client ID\"\n - Select Application Type: \"Web Application\"\n - Add Authorized Javascript Origins: http://localhost, http://localhost:3000, https://example.com (prod domain must be HTTPS)\n - If using custom button, add the same origins to \"Authorized redirect URIs\"\n - Click \"Save\"\n- Copy the OAuth \"Client ID\" and \"Client Secret\" and save it for later. Mine looks like 309209880368-4uqd9e44h7t4alhhdqn48pvvr63cc5j5.apps.googleusercontent.com\n\nhttps://github.com/reflex-dev/reflex-examples/assets/1524005/af2499a6-0bda-4d60-b52b-4f51b7322fd5\n\n### Configure Environment Variables\n\nSet the following environment variables based on your deployment.\n\n```bash\nexport GOOGLE_CLIENT_ID=\"309209880368-4uqd9e44h7t4alhhdqn48pvvr63cc5j5.apps.googleusercontent.com\"\nexport GOOGLE_CLIENT_SECRET=\"your_client_secret\"\nexport GOOGLE_REDIRECT_URI=\"http://localhost:3000\"\n```\n\n### Integrate with Reflex app\n\nThe `GoogleAuthState` provided by this component has a `token_is_valid` var that\nshould be checked before returning any protected content.\n\nAdditionally the `GoogleAuthState.tokeninfo` dict contains the user's profile information.\n\n```python\nfrom reflex_google_auth import GoogleAuthState, require_google_login\n\n\nclass State(GoogleAuthState):\n @rx.var(cache=True)\n def protected_content(self) -> str:\n if self.token_is_valid:\n return f\"This content can only be viewed by a logged in User. Nice to see you {self.tokeninfo['name']}\"\n return \"Not logged in.\"\n```\n\nThe convenience decorator, `require_google_login`, can wrap an existing component, and\nshow the \"Sign in with Google\" button if the user is not already authenticated. It can be\nused on a page function or any subcomponent function of the page.\n\nThe \"Sign in with Google\" button can also be displayed via `google_login()`:\n\n```python\nfrom reflex_google_auth import google_login, google_oauth_provider\n\ndef page():\n return rx.div(\n google_oauth_provider(\n google_login(),\n ),\n )\n```\n\nTo uniquely identify a user, the `GoogleAuthState.tokeninfo['sub']` field can be used.\n\nSee the example in\n[masenf/rx_shout](https://github.com/masenf/rx_shout/blob/main/rx_shout/state.py)\nfor how to integrate an authenticated Google user with other app-specific user\ndata.\n\n### Customizing the Button\n\nIf you want to use your own login button, you may use whatever component you\nlike, as long as it is wrapped in a `reflex_google_auth.google_oauth_provider`\ncomponent and the `on_click` triggers\n`reflex_google_auth.handle_google_login()`. Note that this cannot be combined\nwith other event handlers.\n\nThis functionality is also exposed in the `require_google_auth` decorator, which\naccepts a `button` keyword argument.\n\nWhen using a custom button, the returned auth-code _must be validated on the\nbackend_, which is handled by this library, but **requires additionally setting\n`GOOGLE_CLIENT_SECRET` and `GOOGLE_REDIRECT_URI` environment variables**. These\ncan be configured in the Google Cloud Console as described above.\n\n```python\nfrom reflex_google_auth import handle_google_login, require_google_login, GoogleAuthState\n\n\n@require_google_login(button=rx.button(\"Google Login \ud83d\ude80\", on_click=handle_google_login()))\ndef custom_button() -> rx.Component:\n return rx.vstack(\n f\"{GoogleAuthState.tokeninfo['email']} clicked a custom button to login, nice\",\n )\n```\n",
"bugtrack_url": null,
"license": "Apache-2.0",
"summary": "Sign in with Google",
"version": "0.0.8",
"project_urls": {
"homepage": "https://github.com/masenf/reflex-google-auth"
},
"split_keywords": [
"reflex",
" reflex-custom-components"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "cdc124eb6fc0d00cd853732e01e75319c2ada1790b1ac57ea85a0430aeec24a6",
"md5": "eaf999fb9f0362e7ffe98ffa3656264b",
"sha256": "494a750ec261a122c3e539aa98b7983cbf91f6142623b8b4dc636413ab444e5b"
},
"downloads": -1,
"filename": "reflex_google_auth-0.0.8-py3-none-any.whl",
"has_sig": false,
"md5_digest": "eaf999fb9f0362e7ffe98ffa3656264b",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 6208,
"upload_time": "2024-12-20T00:23:28",
"upload_time_iso_8601": "2024-12-20T00:23:28.683883Z",
"url": "https://files.pythonhosted.org/packages/cd/c1/24eb6fc0d00cd853732e01e75319c2ada1790b1ac57ea85a0430aeec24a6/reflex_google_auth-0.0.8-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "ef9ecb2420c6a5431ccad8ecfff1836345bf2a1e0a624d8ef62a24116c631570",
"md5": "de243f0310bf9ac9bccc58cd60d3fd37",
"sha256": "a640d91b6278a7a1000a55bc3889699cfb5186e93438137af84f547ff1a9c5c8"
},
"downloads": -1,
"filename": "reflex_google_auth-0.0.8.tar.gz",
"has_sig": false,
"md5_digest": "de243f0310bf9ac9bccc58cd60d3fd37",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 5398,
"upload_time": "2024-12-20T00:23:30",
"upload_time_iso_8601": "2024-12-20T00:23:30.097648Z",
"url": "https://files.pythonhosted.org/packages/ef/9e/cb2420c6a5431ccad8ecfff1836345bf2a1e0a624d8ef62a24116c631570/reflex_google_auth-0.0.8.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-12-20 00:23:30",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "masenf",
"github_project": "reflex-google-auth",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "reflex-google-auth"
}
JSON
