[GH-ISSUE #211] Authorization for Alwrity #150

Closed
opened 2026-03-02 23:34:01 +03:00 by kerem · 3 comments
Owner

Originally created by @Om-Singh1808 on GitHub (Aug 20, 2025).
Original GitHub issue: https://github.com/AJaySi/ALwrity/issues/211

Originally assigned to: @Om-Singh1808 on GitHub.

Working on Authorization in Alwrity .
Phase 1: Account Setup & Configuration (The Foundation)
This is the most important phase. You'll connect all the services you need before you start building.

Create a Facebook Developer Account: Go to the Meta for Developers website and register. This is necessary to get the credentials for your application.

Create a New Facebook App: Inside the developer portal, create a new app. You'll be asked for an app type; choose "Business". This app will represent your project and give you an App ID and an App Secret.

Create a Clerk Account: Go to Clerk.com and sign up. Create a new application in the Clerk dashboard. This dashboard will be your central hub for managing users.

Connect Clerk to Your Facebook App:

In your Clerk dashboard, navigate to "Social Connections".

Select Facebook and enable it.

Clerk will ask for the App ID and App Secret from the Facebook app you just created.

Clerk will then give you a Redirect URI. Copy this URI.

Go back to your Facebook App settings, find the "Facebook Login" product, and paste the Clerk Redirect URI into the "Valid OAuth Redirect URIs" field. This step tells Facebook to trust Clerk.

Phase 2: Backend Planning (The Engine Room)
Now, plan what your FastAPI server will do. Think of it as the brain of the operation.

Define Your API Endpoint: You only need one main endpoint. Let's call it /publish. Its job is simple: receive a message from the user's browser and post it to their Facebook.

Plan the Logic:

The /publish endpoint must be protected. Only logged-in users can use it.

When a request comes in, the first step is to verify the user's identity with Clerk.

The second step is to ask Clerk for the specific Facebook access token for that user.

The final step is to use that token to send the user's message to the Facebook Graph API.

Phase 3: Frontend Planning (The User Interface)
Plan how your users will interact with the application in their browser.

Choose Your React Setup: Decide if you will use a tool like Vite or Create React App to initialize your project. Vite is generally faster and more modern.

Plan the UI Components: You need two main views:

A Login View: This is what users see when they are signed out. It will simply show Clerk's pre-built "Sign In" button.

A Home View: This is for signed-in users. It will contain a text box for writing a message and a "Post to Facebook" button.

Map Out the User Flow:

A new user visits your site.

They click the "Sign In" button, and Clerk's login modal appears.

They choose "Continue with Facebook" and approve the connection.

Once logged in, they are automatically taken to the Home View.

They type a message, click "Post," and see a confirmation or error message.

Phase 4: Connecting Everything & Testing
Plan how the frontend and backend will communicate and how you'll verify everything works.

Plan the API Integration: The "Post to Facebook" button in your React app will trigger a request to the /publish endpoint on your FastAPI server. Plan to send the user's Clerk authentication token in the header of this request to prove who they are.

Outline the Testing Process:

First, test the login flow. Can you sign up and log in successfully using the Clerk components?

Second, test the API protection. Can you access the /publish endpoint without being logged in? (You shouldn't be able to).

Finally, test the full end-to-end flow: log in, write a message, and click post. Check your Facebook profile to see if the message appeared.

Here is a phase wise implementation plan @AJaySi

Do take a look.

Originally created by @Om-Singh1808 on GitHub (Aug 20, 2025). Original GitHub issue: https://github.com/AJaySi/ALwrity/issues/211 Originally assigned to: @Om-Singh1808 on GitHub. Working on Authorization in Alwrity . Phase 1: Account Setup & Configuration (The Foundation) This is the most important phase. You'll connect all the services you need before you start building. Create a Facebook Developer Account: Go to the Meta for Developers website and register. This is necessary to get the credentials for your application. Create a New Facebook App: Inside the developer portal, create a new app. You'll be asked for an app type; choose "Business". This app will represent your project and give you an App ID and an App Secret. Create a Clerk Account: Go to Clerk.com and sign up. Create a new application in the Clerk dashboard. This dashboard will be your central hub for managing users. Connect Clerk to Your Facebook App: In your Clerk dashboard, navigate to "Social Connections". Select Facebook and enable it. Clerk will ask for the App ID and App Secret from the Facebook app you just created. Clerk will then give you a Redirect URI. Copy this URI. Go back to your Facebook App settings, find the "Facebook Login" product, and paste the Clerk Redirect URI into the "Valid OAuth Redirect URIs" field. This step tells Facebook to trust Clerk. Phase 2: Backend Planning (The Engine Room) Now, plan what your FastAPI server will do. Think of it as the brain of the operation. Define Your API Endpoint: You only need one main endpoint. Let's call it /publish. Its job is simple: receive a message from the user's browser and post it to their Facebook. Plan the Logic: The /publish endpoint must be protected. Only logged-in users can use it. When a request comes in, the first step is to verify the user's identity with Clerk. The second step is to ask Clerk for the specific Facebook access token for that user. The final step is to use that token to send the user's message to the Facebook Graph API. Phase 3: Frontend Planning (The User Interface) Plan how your users will interact with the application in their browser. Choose Your React Setup: Decide if you will use a tool like Vite or Create React App to initialize your project. Vite is generally faster and more modern. Plan the UI Components: You need two main views: A Login View: This is what users see when they are signed out. It will simply show Clerk's pre-built "Sign In" button. A Home View: This is for signed-in users. It will contain a text box for writing a message and a "Post to Facebook" button. Map Out the User Flow: A new user visits your site. They click the "Sign In" button, and Clerk's login modal appears. They choose "Continue with Facebook" and approve the connection. Once logged in, they are automatically taken to the Home View. They type a message, click "Post," and see a confirmation or error message. Phase 4: Connecting Everything & Testing Plan how the frontend and backend will communicate and how you'll verify everything works. Plan the API Integration: The "Post to Facebook" button in your React app will trigger a request to the /publish endpoint on your FastAPI server. Plan to send the user's Clerk authentication token in the header of this request to prove who they are. Outline the Testing Process: First, test the login flow. Can you sign up and log in successfully using the Clerk components? Second, test the API protection. Can you access the /publish endpoint without being logged in? (You shouldn't be able to). Finally, test the full end-to-end flow: log in, write a message, and click post. Check your Facebook profile to see if the message appeared. Here is a phase wise implementation plan @AJaySi Do take a look.
kerem 2026-03-02 23:34:01 +03:00
Author
Owner

@AJaySi commented on GitHub (Aug 21, 2025):

It talks about auth and Not authorization. How will you get the scope and we did not talk about access token and getting required permission /post endpoint. Lets implement and check.

<!-- gh-comment-id:3208792236 --> @AJaySi commented on GitHub (Aug 21, 2025): It talks about auth and Not authorization. How will you get the scope and we did not talk about access token and getting required permission /post endpoint. Lets implement and check.
Author
Owner

@Om-Singh1808 commented on GitHub (Aug 21, 2025):

I am working on implementation
I have a different implementation plan right now
Updating that in a while , this did not work as I expected
Done with the frontend , working on backend and authorization.
@AJaySi

<!-- gh-comment-id:3209441665 --> @Om-Singh1808 commented on GitHub (Aug 21, 2025): I am working on implementation I have a different implementation plan right now Updating that in a while , this did not work as I expected Done with the frontend , working on backend and authorization. @AJaySi
Author
Owner

@AJaySi commented on GitHub (Sep 1, 2025):

Update and close this issue. You can open a new issue for remaining auths.

<!-- gh-comment-id:3240722066 --> @AJaySi commented on GitHub (Sep 1, 2025): Update and close this issue. You can open a new issue for remaining auths.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/ALwrity#150
No description provided.