gaganpreet/fastapi-starter

A FastAPI based low code starter/boilerplate: SQLAlchemy 2.0 (async), Postgres, React-Admin, pytest and cypress

fastapi-starter's Issues

Use newer OpenAPI generator version

Currently using 5.3.1, upstream (as of now) is at 6.4.0

Authorization

I'm having a hard time with authorization in the swagger, There are 4 fields. password, username, id and client secret which is confusing me, what should I do to authorize myself.

make BearerTransport URL respect settings.API_PATH

When changing the settings.API_PATH the BeaerTransport tokenUrl should also change. This way swagger auth works also seamless with the API_PATH change. Does this make sense to you?

diff --git a/{{cookiecutter.project_slug}}/backend/app/deps/users.py b/{{cookiecutter.project_slug}}/backend/app/deps/users.py
index bece38a..7dff0f7 100644
--- a/{{cookiecutter.project_slug}}/backend/app/deps/users.py
+++ b/{{cookiecutter.project_slug}}/backend/app/deps/users.py
@@ -15,7 +15,8 @@ from app.core.config import settings
 from app.deps.db import CurrentAsyncSession
 from app.models.user import User as UserModel
 
-bearer_transport = BearerTransport(tokenUrl="auth/jwt/login")
+bearer_transport = BearerTransport(tokenUrl=f"{settings.API_PATH}/auth/jwt/login")

Use annotated FastAPI dependencies

https://github.com/tiangolo/fastapi/releases/tag/0.95.0

Issue developing front end "___ cannot be used as a JSX component"

Hi everyone,

I have a problem developing the front end. Whenever I change Dashboard.tsx, the webpage does not automatically update. These are the error

Compiled successfully!

You can now view frontend in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.31.71.205:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

webpack compiled successfully
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
ERROR in src/App.tsx:43:10
TS2786: 'Route' cannot be used as a JSX component.
  Its type '(_props: RouteProps) => ReactElement<any, string | JSXElementConstructor<any>> | null' is not a valid JSX element type.
    Type '(_props: RouteProps) => ReactElement<any, string | JSXElementConstructor<any>> | null' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not assignable to type 'ReactNode'.
        Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
          Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.
    41 |     >
    42 |       <CustomRoutes>
  > 43 |         <Route path="/my-profile" element={<ProfileEdit />}  />
       |          ^^^^^
    44 |       </CustomRoutes>
    45 |       <CustomRoutes noLayout>
    46 |         <Route path="/register" element={<Register />}  />

ERROR in src/App.tsx:46:10
TS2786: 'Route' cannot be used as a JSX component.
  Its type '(_props: RouteProps) => ReactElement<any, string | JSXElementConstructor<any>> | null' is not a valid JSX element type.
    44 |       </CustomRoutes>
    45 |       <CustomRoutes noLayout>
  > 46 |         <Route path="/register" element={<Register /> as any}  />
       |          ^^^^^
    47 |       </CustomRoutes>
    48 |       {(permissions) => [
    49 |         permissions.is_superuser === true ? (

ERROR in src/components/AdminLayout.tsx:8:8
TS2786: 'MenuItemLink' cannot be used as a JSX component.
  Its type 'ForwardRefExoticComponent<Pick<MenuItemLinkProps, "replace" | "id" | "children" | "value" | "slot" | "style" | "title" | "type" | "key" | "className" | "resource" | "classes" | "disableGutters" | ... 275 more ... | "tooltipProps"> & RefAttributes<...>>' is not a valid JSX element type.
    Type 'ForwardRefExoticComponent<Pick<MenuItemLinkProps, "replace" | "id" | "children" | "value" | "slot" | "style" | "title" | "type" | "key" | "className" | "resource" | "classes" | "disableGutters" | ... 275 more ... | "tooltipProps"> & RefAttributes<...>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not assignable to type 'ReactNode'.
     6 |   return (
     7 |     <UserMenu {...props}>
  >  8 |       <MenuItemLink
       |        ^^^^^^^^^^^^
     9 |         to="/my-profile"
    10 |         primaryText="My Profile"
    11 |         leftIcon={<SettingsIcon />}

ERROR in src/index.tsx:8:4
TS2786: 'React.StrictMode' cannot be used as a JSX component.
  Its type 'ExoticComponent<{ children?: ReactNode; }>' is not a valid JSX element type.
    Type 'ExoticComponent<{ children?: ReactNode; }>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not assignable to type 'ReactNode'.
     6 |
     7 | ReactDOM.render(
  >  8 |   <React.StrictMode>
       |    ^^^^^^^^^^^^^^^^
     9 |     <App />
    10 |   </React.StrictMode>,
    11 |   document.getElementById("root")

ERROR in src/pages/Items.tsx:13:4
TS2786: 'List' cannot be used as a JSX component.
  Its type '{ <RecordType extends RaRecord<Identifier> = any>({ debounce, disableAuthentication, disableSyncWithLocation, exporter, filter, filterDefaultValues, perPage, queryOptions, resource, sort, storeKey, ...rest }: ListProps<RecordType>): ReactElement<any, string | JSXElementConstructor<any>>; propTypes: { ...; }; }' is not a valid JSX element type.
    Type '{ <RecordType extends RaRecord<Identifier> = any>({ debounce, disableAuthentication, disableSyncWithLocation, exporter, filter, filterDefaultValues, perPage, queryOptions, resource, sort, storeKey, ...rest }: ListProps<RecordType>): ReactElement<any, string | JSXElementConstructor<any>>; propTypes: { ...; }; }' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.    
      Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
    11 |
    12 | export const ItemList = (props: any) => (
  > 13 |   <List {...props} filters={[]}>
       |    ^^^^
    14 |     <Datagrid>
    15 |       <TextField source="value" />
    16 |       <TextField source="id" />

ERROR in src/pages/Items.tsx:31:4
TS2786: 'Create' cannot be used as a JSX component.
  Its type '{ <RecordType extends Omit<RaRecord<Identifier>, "id"> = any, ResultRecordType extends RaRecord<Identifier> = RecordType & { id: Identifier; }>(props: CreateProps<...> & { ...; }): ReactElement<...>; propTypes: { ...; }; }' is not a valid JSX element type.
    Type '{ <RecordType extends Omit<RaRecord<Identifier>, "id"> = any, ResultRecordType extends RaRecord<Identifier> = RecordType & { id: Identifier; }>(props: CreateProps<...> & { ...; }): ReactElement<...>; propTypes: { ...; }; }' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
    29 |
    30 | export const ItemCreate = (props: any) => (
  > 31 |   <Create {...props}>
       |    ^^^^^^
    32 |     <SimpleForm>
    33 |       <TextInput source="value" />
    34 |     </SimpleForm>

ERROR in src/pages/ProfileEdit.tsx:39:6
TS2786: 'ProfileContext.Provider' cannot be used as a JSX component.
  Its type 'Provider<{ profileVersion: number; refreshProfile: () => void; }>' is not a valid JSX element type.
    Type 'ProviderExoticComponent<ProviderProps<{ profileVersion: number; refreshProfile: () => void; }>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not assignable to type 'ReactNode'.
        Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
          Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.
    37 |
    38 |   return (
       |      ^^^^^^^^^^^^^^^^^^^^^^^
       |      ^^^^^^^^^^^^^^^^^^^^^^^
    40 |       {children}
    41 |     </ProfileContext.Provider>
    42 |   );

ERROR in src/pages/Users.tsx:15:4
TS2786: 'List' cannot be used as a JSX component.
  Its type '{ <RecordType extends RaRecord<Identifier> = any>({ debounce, disableAuthentication, disableSyncWithLocation, exporter, filter, filterDefaultValues, perPage, queryOptions, resource, sort, storeKey, ...rest }: ListProps<RecordType>): ReactElement<any, string | JSXElementConstructor<any>>; propTypes: { ...; }; }' is not a valid JSX element type.
    13 |
    14 | export const UserList = (props: any) => (
  > 15 |   <List {...props}>
       |    ^^^^
    16 |     <Datagrid>
    17 |       <TextField source="id" />
    18 |       <EmailField source="email" />

User registration throwing network error.

With a local download and the demo app, trying to register a new user results in an error message, "network error". Thanks!

Creating project with default values throw an error on .env file

Error message:

Unable to create file '.env'
Error message: 'random_ascii_string' is undefined
Context: {
    "cookiecutter": {
        "_copy_without_render": [
            "*node_modules",
            "*src/App.tsx",
            "*pages/ProfileEdit.tsx"
        ],
        "_template": "https://github.com/gaganpreet/fastapi-starter",
        "backend_port": "8000",
        "frontend_port": "3000",
        "project_name": "Sample project",
        "project_slug": "sample-project"
    }
}

Steps to reproduce:

cookiecutter https://github.com/gaganpreet/fastapi-starter
You've downloaded /home/maciej/snap/cookiecutter/1/.cookiecutters/fastapi-starter before. Is it okay to delete and re-download it? [yes]: yes
project_name [Sample project]: 
project_slug [sample-project]: 
backend_port [8000]: 
frontend_port [3000]: 

Enviroment:

Ubuntu 20.04.4 LTS
Python 3.10.4 (via pyenv 2.3.0-14-g0930533)
Cookiecutter 1.6.0 from /snap/cookiecutter/1/lib/python3.6/site-packages (Python 3.6)
Creation of project inside venv

Frontend: API calls get transformed from https into http

Hi,

so I'm not entirely sure if the problem is with React Admin, the simpleRestProvider,fastapi-starter or something else entirely, but since I'm not finding a bunch of people with the same problem when using the first two, I thought I would first ask here.

I have this strange behavior where things work fine locally, but when I deploy into production environment (i.e. with a proper domain and https), I can login, but then I cannot get any data from the API because all calls are attempted with http://mydomain.com instead of https://mydomain.com, which the browser of course blocks:

As you can see in the screenshot, I have peppered the thing with a bunch of console.log statements (like the professional that I am) to see what value I'm using for the url, and there it seems to be correct. Immediately after though, when actually executing the request, somewhere it loses the s and gets transformed into http://[rest of the url].

const httpClient = (url: string, options: any = {}) => {
    options.user = {
        authenticated: true,
        token: `Bearer ${localStorage.getItem("token")}`,
    };
    if (url.includes("/users/") && options.method === "PUT") {
        // We use PATCH for update on the backend for users, since PATCH is selective PUT, this change should be fine
        options.method = "PATCH";
    }
    if (!options.headers) {
        options.headers = new Headers({Accept: "application/json"});
    }
    options.headers.set("x-api-key", my_api_key);
    console.log("Wtf is going on");
    console.log("url", url);
    return fetchUtils.fetchJson(url, options);
};

console.log("basePath", basePath);
const dataProvider = simpleRestProvider(`${basePath}/api/v1`, httpClient);

As you can see, I have barely changed that part apart apart from adding my api key header. Both of these console.logs show me the correct https url, and I know that this is actually getting used because my x-api-key header is actually sent in the failing request.

Interestingly, the AuthProvider does not have the same problem - it uses https as it should, and I can login and open my profile and everything.
I have also confirmed that I can call my endpoints over https via postman.

I admit I'm quite new to react, react admin and frontend development in general is not my strong suit, so maybe there is something really obvious that I'm doing wrong, but I'm not really sure where to look because it seems like I'm passing the right parameters?

Use uvloop for better performance

https://www.uvicorn.org/deployment/#gunicorn

Super-user

Hello, I started using your fastapi-starter and I would like to know where is login info for superuser or how to create superuser ?

When I try to authorize in API docs I always get error code 405 and I'am not sure how to authorize for using API. Or is API only accessible from UI ?

I'am pretty new to react-admin and if you can redirect me to some spesific documentation or please clarify for me how to create superuser I would be very thankful

Migrate to ruff

https://github.com/charliermarsh/ruff

Update to Python 3.11