Skip to content

Commit

Permalink
fix: Making auth better. Prepping for Stripe. #1
Browse files Browse the repository at this point in the history
  • Loading branch information
@LuchoTurtle
LuchoTurtle committed Dec 22, 2022
1 parent e8ba53a commit 5f26dae
Show file tree
Hide file tree
Showing 4 changed files with 232 additions and 174 deletions.
160 changes: 160 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -481,6 +481,166 @@ However, that's not quite what we want.
We want the user to be logged in
and *also* being a paying costumer so they have access to `/dashboard`.

We can make it prettier, though.
Let's add two endpoints:
- one to login (`/login`)
- one to logout (`/logout`)

From the landing page,
we are going to be adding a button that will log the user in,
and redirect to the `/login` URL.
After logging in, he will be redirected back to the home page.
We will need to conditionally render the home page (`/`)
according to the user being logged in or not.

For this, we are going to be using
an [`optional auth pipeline`](https://github.com/dwyl/auth_plug#optional-auth).
It will add allow us show custom actions on people who are authenticated or not.
This pipeline will add the logged in to the `conn.assigns`.

Head on to `lib/app_web/router.ex`
and add/change the following piece of code.

```elixir
pipeline :authoptional, do: plug(AuthPlugOptional, %{})

scope "/", AppWeb do
pipe_through :browser
pipe_through :authoptional

get "/", PageController, :home
get "/login", AuthController, :login
get "/logout", AuthController, :logout
end
```

We are now using a new controller `AuthController`.
Let's create it.
Inside `lib/app_web/controllers`,
create a new file called `auth_controller.ex`
and paste the following.

```elixir
defmodule AppWeb.AuthController do
use AppWeb, :controller

def login(conn, _params) do
redirect(conn, external: AuthPlug.get_auth_url(conn, ~p"/"))
end

def logout(conn, _params) do
conn
|> AuthPlug.logout()
|> put_status(302)
|> redirect(to: ~p"/")
end
end
```

We just now need to change the view
to redirect to these URLs (`login` and `logout`).
Head over to `lib/app_web/controllers/page_html/home.html.heex`,
locate the line.

```html
<div class="px-4 py-10 sm:py-28 sm:px-6 lg:px-8 xl:py-32 xl:px-28">
```

From this line to the end of the file,
change the contents with the next lines:

```html
<div class="px-4 py-10 sm:py-28 sm:px-6 lg:px-8 xl:py-32 xl:px-28">
<div class="mx-auto max-w-xl lg:mx-0">
<svg viewBox="0 0 71 48" class="h-12" aria-hidden="true">
<path
d="m26.371 33.477-.552-.1c-3.92-.729-6.397-3.1-7.57-6.829-.733-2.324.597-4.035 3.035-4.148 1.995-.092 3.362 1.055 4.57 2.39 1.557 1.72 2.984 3.558 4.514 5.305 2.202 2.515 4.797 4.134 8.347 3.634 3.183-.448 5.958-1.725 8.371-3.828.363-.316.761-.592 1.144-.886l-.241-.284c-2.027.63-4.093.841-6.205.735-3.195-.16-6.24-.828-8.964-2.582-2.486-1.601-4.319-3.746-5.19-6.611-.704-2.315.736-3.934 3.135-3.6.948.133 1.746.56 2.463 1.165.583.493 1.143 1.015 1.738 1.493 2.8 2.25 6.712 2.375 10.265-.068-5.842-.026-9.817-3.24-13.308-7.313-1.366-1.594-2.7-3.216-4.095-4.785-2.698-3.036-5.692-5.71-9.79-6.623C12.8-.623 7.745.14 2.893 2.361 1.926 2.804.997 3.319 0 4.149c.494 0 .763.006 1.032 0 2.446-.064 4.28 1.023 5.602 3.024.962 1.457 1.415 3.104 1.761 4.798.513 2.515.247 5.078.544 7.605.761 6.494 4.08 11.026 10.26 13.346 2.267.852 4.591 1.135 7.172.555ZM10.751 3.852c-.976.246-1.756-.148-2.56-.962 1.377-.343 2.592-.476 3.897-.528-.107.848-.607 1.306-1.336 1.49Zm32.002 37.924c-.085-.626-.62-.901-1.04-1.228-1.857-1.446-4.03-1.958-6.333-2-1.375-.026-2.735-.128-4.031-.61-.595-.22-1.26-.505-1.244-1.272.015-.78.693-1 1.31-1.184.505-.15 1.026-.247 1.6-.382-1.46-.936-2.886-1.065-4.787-.3-2.993 1.202-5.943 1.06-8.926-.017-1.684-.608-3.179-1.563-4.735-2.408l-.043.03a2.96 2.96 0 0 0 .04-.029c-.038-.117-.107-.12-.197-.054l.122.107c1.29 2.115 3.034 3.817 5.004 5.271 3.793 2.8 7.936 4.471 12.784 3.73A66.714 66.714 0 0 1 37 40.877c1.98-.16 3.866.398 5.753.899Zm-9.14-30.345c-.105-.076-.206-.266-.42-.069 1.745 2.36 3.985 4.098 6.683 5.193 4.354 1.767 8.773 2.07 13.293.51 3.51-1.21 6.033-.028 7.343 3.38.19-3.955-2.137-6.837-5.843-7.401-2.084-.318-4.01.373-5.962.94-5.434 1.575-10.485.798-15.094-2.553Zm27.085 15.425c.708.059 1.416.123 2.124.185-1.6-1.405-3.55-1.517-5.523-1.404-3.003.17-5.167 1.903-7.14 3.972-1.739 1.824-3.31 3.87-5.903 4.604.043.078.054.117.066.117.35.005.699.021 1.047.005 3.768-.17 7.317-.965 10.14-3.7.89-.86 1.685-1.817 2.544-2.71.716-.746 1.584-1.159 2.645-1.07Zm-8.753-4.67c-2.812.246-5.254 1.409-7.548 2.943-1.766 1.18-3.654 1.738-5.776 1.37-.374-.066-.75-.114-1.124-.17l-.013.156c.135.07.265.151.405.207.354.14.702.308 1.07.395 4.083.971 7.992.474 11.516-1.803 2.221-1.435 4.521-1.707 7.013-1.336.252.038.503.083.756.107.234.022.479.255.795.003-2.179-1.574-4.526-2.096-7.094-1.872Zm-10.049-9.544c1.475.051 2.943-.142 4.486-1.059-.452.04-.643.04-.827.076-2.126.424-4.033-.04-5.733-1.383-.623-.493-1.257-.974-1.889-1.457-2.503-1.914-5.374-2.555-8.514-2.5.05.154.054.26.108.315 3.417 3.455 7.371 5.836 12.369 6.008Zm24.727 17.731c-2.114-2.097-4.952-2.367-7.578-.537 1.738.078 3.043.632 4.101 1.728.374.388.763.768 1.182 1.106 1.6 1.29 4.311 1.352 5.896.155-1.861-.726-1.861-.726-3.601-2.452Zm-21.058 16.06c-1.858-3.46-4.981-4.24-8.59-4.008a9.667 9.667 0 0 1 2.977 1.39c.84.586 1.547 1.311 2.243 2.055 1.38 1.473 3.534 2.376 4.962 2.07-.656-.412-1.238-.848-1.592-1.507Zm17.29-19.32c0-.023.001-.045.003-.068l-.006.006.006-.006-.036-.004.021.018.012.053Zm-20 14.744a7.61 7.61 0 0 0-.072-.041.127.127 0 0 0 .015.043c.005.008.038 0 .058-.002Zm-.072-.041-.008-.034-.008.01.008-.01-.022-.006.005.026.024.014Z"
fill="#FD4F00"
/>
</svg>
<h1 class="mt-10 flex items-center text-sm font-semibold leading-6 text-brand">
Phoenix Framework
<small class="ml-3 rounded-full text-white bg-[#008cdd] px-2 text-[0.8125rem] font-medium leading-6">
with Stripe
</small>
</h1>
<p class="mt-4 text-[2rem] font-semibold leading-10 tracking-tighter text-zinc-900">
An example integrating
<span class="text-[#5d97de]">Stripe</span>
with
<span class="text-brand">Phoenix</span>
</p>
<p class="mt-4 text-base leading-7 text-zinc-600">
This is a small project showcasing how to integrate Stripe in a Phoenix project.
The workflow is simple: a logged in user has to pay to have access to <pre>/dashboard</pre>
</p>
<p class="mt-4 text-base leading-7 text-zinc-600">
Otherwise, they are redirected to a buying page to purchase so they can access it.
</p>

<%= if Map.has_key?(@conn.assigns, :person) do %>
<div class="bg-[#decef633] rounded-lg p-6 mt-4">

<p class="text-[2rem] font-semibold leading-10 tracking-tighter text-zinc-900">
Hey there, <%= @conn.assigns.person.username %>!
</p>
<p class="mt-4 text-base leading-7 text-zinc-600">
Thanks for logging in!
It seems that you haven't purchased our sweet dashboard.
You have to "purchase" to proceed.
</p>

<div class="flex mt-4">
<div class="w-full sm:w-auto">

<button class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800">
<span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
Purchase
</span>
</button>
<.link
navigate={~p"/logout"}
class="text-purple-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
>
Logout
</.link>
</div>
</div>

</div>
<% else %>
<div class="flex">
<div class="w-full sm:w-auto">
<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-3">
<.link
navigate={~p"/login"}
class="text-white bg-gradient-to-br from-pink-500 to-orange-400
hover:bg-gradient-to-bl
focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800
font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
>
Login
</.link>
</div>
</div>
</div>
<% end %>
</div>
</div>
```

And you should be done!
The app should look like the following.

![with_auth](https://user-images.githubusercontent.com/17494745/209171533-2a51572b-2d0f-4789-a28b-7d77771caaa5.gif)

Now that we got that out of the way,
we can now *focus on integrating `Stripe`*
in our Phoenix application.

This is going to be fun, let's do this! 👏

## 3. Stripe integration


# Thanks!
Expand Down
14 changes: 14 additions & 0 deletions lib/app_web/controllers/auth_controller.ex
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
defmodule AppWeb.AuthController do
use AppWeb, :controller

def login(conn, _params) do
redirect(conn, external: AuthPlug.get_auth_url(conn, ~p"/"))
end

def logout(conn, _params) do
conn
|> AuthPlug.logout()
|> put_status(302)
|> redirect(to: ~p"/")
end
end
Loading

0 comments on commit 5f26dae

Please sign in to comment.